使用React路由器的多个参数

Question

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

Answer 1

正如@ 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

Answer 2

<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 并使用路由库。

Answer 3

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

Answer 4

尝试一下

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