使用 React Router 的多个参数

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>

原文由 G. Frx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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?"

IE

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

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

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

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

 this.props.match.params.pathParam1

原文由 Tomas Randus 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Bikram Nath 发布，翻译遵循 CC BY-SA 4.0 许可协议