使用 react router 在 urls 之间传递参数的正确方式是什么?

问题描述 投票:0回答:1

React Router v5.1增加了useParams、useHistory和useLocation,加上react-hooks和功能组件带来的编码约定的变化,想弄清楚当代版本的react-router的预期使用方式,变得很困惑。

在用 react router 编程导航时,如何在不同的 urls 之间正确传递参数?

比如说,我有一个组件,叫做 组件_a,点击后调用以下内容。

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

我应该用什么样的方式来传递一些信息呢?组件_a的属性到另一个名为 组件_b? Component_b是这样渲染的。

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

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

我也知道useParams(),然而如果url本身的变量太多,无法传递怎么办?

javascript reactjs react-router react-hooks
1个回答
0
投票

钩子在那里,所以你不必使用HOC。withRouter 来获取你需要的东西。

通过URL,你应该只传递属于URL的数据(例如:路由名称,ID,搜索参数等)。

对于状态,理论上你可以传递任何你想要的东西,但在实践中,你可能会传递一些较小的数据块(如标志,ID)。

路由器v5也有一种新的方式来构建Route。

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

在这里你可以定义所有的组件道具。

对于其他的一切,你应该使用应用程序商店,如Redux,MobX或上下文,你会更新之前,你的。history.push("/home"); 并在你进入后访问它 <YourComponent />

© www.soinside.com 2019 - 2024. All rights reserved.