小编典典

使用React Router的多个参数

reactjs

我使用React 15.0.2和React Router 2.4.0。我想将多个参数传递给我的路线，但我不确定如何以最佳方式做到这一点：

<Route name="User" path="/user" component={UserPage}>   
    <Route name="addTaskModal" path="/user/manage:id" component={ManageTaskPage} />
</Route>

想要的是这样的：

 <Route name="User" path="/user" component={UserPage}>  
    <Route name="addTaskModal" path="/user/manage:id:type" component={ManageTaskPage} />
</Route>

阅读 389

2020-07-22

共1个答案

小编典典

正如@ alexander-t所提到的：

path="/user/manage/:id/:type"

如果要将它们保留为可选：

path="/user/manage(/:id)(/:type)"

反应路由器v4

React Router v4与v1-v3不同，并且可选的路径参数未在文档中明确定义。

而是指示您定义path-to-regexp可以理解的路径参数。这样可以在定义路径（例如重复模式，通配符等）时提供更大的灵活性。因此，要将参数定义为可选参数，请添加尾随问号（？）。

因此，要定义可选参数，您可以执行以下操作：

path="/user/manage/:pathParam1?/:pathParam2?"

即

<Route path="/user/manage/:pathParam1?/:pathParam2?" component={MyPage} />

而强制性参数在V4中仍然相同：

path="/user/manage/:id/:type"

要访问PathParam的值，可以执行以下操作：

this.props.match.params.pathParam1

2020-07-22