如何从 URL 恢复组件状态答案

【问题标题】：How to restore component state from URL如何从 URL 恢复组件状态
【发布时间】：2021-01-13 06:47:25
【问题描述】：

假设用户请求了以下页面：

.../user/12/123

我有以下Route

const [data1, setData1] = useState(0);
const [data2, setData2] = useState(0);
...
<Route path="/user/:data1/:data2">
    <MyComponent data1={data1} data2={data2}/>
</Route>

如何从 URL 恢复/更新状态？

【问题讨论】：

标签： reactjs url react-router state

【解决方案1】：

我有一个可以呈现如下的组件：

<MyComponent pn={..} parts={..} onPost={..} />

因为现在我需要使用路由，所以我不得不创建一个包装器并将其放入路由中：

<Switch>
    <Route path="/user/:pn"><MyComponentWithRouter onPost={handlePost}/></Route>
    <Route path="/user"><MyComponent pn={initialPn} onPost={handlePost}/></Route>
</Switch>

function PppWithRouter(props)
{
    const searchParams = new URLSearchParams(useLocation().search);
    const pn = props.pn !== undefined ? props.pn : useParams().pn;
    const parts = searchParams.get("parts") || "";
    
    return <MyComponent pn={pn} parts={parts} onPost={props.onPost} />
}

现在困扰我的是，如果我选择继续这种方式，我需要为我的大部分组件编写这样的包装器。

【讨论】：

【解决方案2】：

不需要保存状态中的URL参数，只需使用useParams()钩子访问参数即可。 useParams() 返回 URL 参数键/值对的对象。

这与使用this.props.match.params访问基于类的组件中的URL参数相同

const { data1, data2 } = useParams();

...
<Route path="/user/:data1/:data2">
    <MyComponent data1={data1} data2={data2}/>
</Route>

【讨论】：

我认为这不起作用，因为useParams 需要路由器上下文。所以我需要在MyComponent 中使用useParams 或创建一个包装器。
如果您的路由是/user/12/123，并且您想访问路由参数，即MyComponent 内的12 和123，使用useParams 内MyComponent 将允许您访问路由参数。我不确定你还想做什么。
我接受您的回答，因为它朝着正确的方向发展。您可以在下面看到我的意思。