使用React路由器的多个参数

时间:2016-06-08 07:50:17

标签: reactjs react-router

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

4 个答案:

答案 0 :(得分:44)

正如@ alexander-t所说:

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

如果你想让它们保持可选:

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

React Router v4

React Router v4与v1-v3不同,并且documentation中未明确定义可选路径参数。

相反,您被指示定义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

答案 1 :(得分:1)

<Route path="/:category/:id" exact component={ItemDetails} />

在组件中,使用 useParams 中的 react-router-dom

import { useParams } from 'react-router-dom'
export default function ItemDetails(props) {

const {id, category} = useParams();
return (
    <div className="">
        {id}
        {category}
    </div>
)

这是解决方案,没有 props 并使用路由库。

答案 2 :(得分:0)

对于可选的param字段,由于某种原因,它在braces()内的冒号之前没有斜杠的情况下工作正常。 React-router 2.6x

答案 3 :(得分:0)

尝试一下

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