如何使用 Redux 和 react 路由器保留查询参数？答案

【问题标题】：How can I preserve query parameters with Redux and react router?如何使用 Redux 和 react 路由器保留查询参数？
【发布时间】：2023-04-01 19:39:01
【问题描述】：

我正在使用 React 路由器，我希望能够发送链接或共享它，但每次我重新加载页面时，状态都会变为空

http://localhost:3000/project/element=7/userid=9/exercises

如果我在 url 中输入此查询，则不会保留状态。

这是我的代码：

<Route
    exact
    path="/project/element=:elementId/userid=:userid/exercises"
    component={Exercises}
    key={`exercises-id`}
/>

我尝试过：

 <Link to="/project/element=:elementId/userid=:userid/exercises" query={this.props.query}

但它没有保留我的 userId 和 elementId 的状态。

路线如下：

<Route
    exact
    path="/project/element=:elementId/userid=:userid/exercises"
    component={Exercises}
    key={`exercises-id`}
/>

感谢您的帮助

【问题讨论】：

你想在哪里持久化它？您的组件Exercises 将接收参数并且理论上可以持久化它们。
在练习组件中是的，但我不知道该怎么做
@Yannis 仅供参考 /element=7/userid=9/ 是一种混合查询参数语法和路径参数语法的非常奇怪的方式。约定是 /elements/7/user/9 或两者都作为查询参数：/project/exercises?element=&user=.

【解决方案1】：

path="/project/element=:elementId/userid=:userid/exercises"

应该是

path="/project/element/:elementId/userid/:userid/exercises" 里面

【讨论】：