Reactjs 如何从URL恢复组件状态

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

.../user/12/123

我有以下

路线

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

const[data1，setData1]=useState（0）；
const[data2，setData2]=useState（0）；
...

---

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

无需在状态中保存URL参数，只需使用钩子访问参数即可

useParams（）

返回URL参数的键/值对对象

这与使用

This.props.match.params

const { data1, data2 } = useParams();

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

const{data1，data2}=useParams（）；
...

我有一个组件，可以按如下方式呈现：

<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} />
}

功能PppWithRouter（道具）
{
const searchParams=新的URLSearchParams（useLocation（）.search）；
const pn=props.pn！==未定义？props.pn:useParams（）.pn；
const parts=searchParams.get（“parts”）| |“”；
返回
}

---

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

我认为这不起作用，因为

useparms

需要路由器上下文。因此，我需要在

MyComponent

内部使用

useparms

或创建一个包装器。如果您的路由是

/user/12/123

，并且您希望访问路由参数，即

MyComponent

内部的12和123，则使用

useparms

将允许您访问路由参数。我不知道你还想做什么。我接受你的回答，因为它朝着正确的方向发展。你可以看到我的意思如下。