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本身的变量太多,无法传递怎么办?
钩子在那里,所以你不必使用HOC。withRouter
来获取你需要的东西。
通过URL,你应该只传递属于URL的数据(例如:路由名称,ID,搜索参数等)。
对于状态,理论上你可以传递任何你想要的东西,但在实践中,你可能会传递一些较小的数据块(如标志,ID)。
路由器v5也有一种新的方式来构建Route。
<Route path="/home">
<YourComponent prop1 prop2 />
</Route>
在这里你可以定义所有的组件道具。
对于其他的一切,你应该使用应用程序商店,如Redux,MobX或上下文,你会更新之前,你的。history.push("/home");
并在你进入后访问它 <YourComponent />