使用反应路由器在 url 之间传递参数的正确方法是什么？答案

【问题标题】：What is the proper way to pass parameters between urls using react router?使用反应路由器在 url 之间传递参数的正确方法是什么？
【发布时间】：2020-08-06 00:31:18
【问题描述】：

随着 React Router v5.1 添加了 useParams、useHistory 和 useLocation，以及随着 react-hooks 和功能组件带来的不断变化的编码约定，试图找出使用当代版本的 react-的预期方式变得令人困惑-路由器。

在使用 react router 编程导航时，如何在不同的 url 之间正确传递参数？

例如，假设我有一个名为 component_a 的组件，单击时会调用以下内容：

history.push("/home"); //history is defined as the return value of useHistory() from react-router-dom

我将 component_a 的一些属性传递给另一个名为 component_b 的组件的正确方法是什么？ Component_b 是这样渲染的：

<Route path="/home" component={component_b}/>

我知道 history.push() 需要第二个参数[state]。但是我在文档中没有看到任何示例。我也找不到它的描述。

我也知道 useParams()，但是如果有太多变量需要通过 url 本身呢？

【问题讨论】：

这能回答你的问题吗？ How to pass params with history.push/Link/Redirect in react-router v4?
确实如此，但是我不确定该答案是否对 v5.1 仍然有效。它肯定看起来断章取义，因为它没有提到使用 React Router 5.1 添加的 useParams、useHistory、useLocation 等等
确实如此。钩子只是访问与以前相同的对象的方法。

标签： javascript reactjs react-router react-hooks

【解决方案1】：

钩子在那里，所以你不必再使用 HOC withRouter 来从路由器获取你需要的东西。

通过 URL，您应该只传递本机属于 URL 的数据（例如，路由名称、ID、搜索参数等）

理论上你可以传递你想要的任何东西，但实际上你可能会传递一些较小的数据块（例如标志、ID）

在路由器 v5 中，还有一种构建路由的新方法

<Route path="/home">
  <YourComponent prop1 prop2 />
</Route>

在那里你定义了你所有的组件道具

对于其他一切，您应该使用 Redux、MobX 或 Context 等应用商店，您将在您的 history.push("/home"); 之前更新并在您进入 <YourComponent /> 后访问它

【讨论】：