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

Question

随着 React Router v5.1 添加了 useParams、useHistory 和 useLocation，以及 react-hooks 和功能组件带来的更改编码约定，试图找出使用现代版本 react-router 的预期方法变得令人困惑。

在使用 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 本身怎么办？

Answer 1

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

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

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

使用路由器 v5，还有一种构建 Route 的新方法

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

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

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