小编典典

使用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>

阅读 382

收藏
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