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

---

或许像这样 path="/user/manage/:id/:type"？ - Oleksandr T.

好的，谢谢你的回复。我只是在思考。还没有喝咖啡，需要启动我的大脑。 - G. Frx

Answer 1

正如 @alexander-t 所提到的：

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

如果您想使它们变成可选项：

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

---

React Router v4

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

相反，您需要定义一个路径参数，该参数由path-to-regexp理解。这允许您更灵活地定义路径，例如重复模式、通配符等。因此，要将参数定义为可选项，只需添加一个问号(?)。

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

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

即 (i.e.)

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

然而，V4版本中强制参数仍然保持不变：

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

要访问PathParam的值，可以这样做：

this.props.match.params.pathParam1

- Tomas Randus

---

React Router 4 中，可选参数的写法如下：/user/manage/:id?/:type?。请注意，本信息仅为简短提示，不包含任何解释或其他内容。 - helb

请问如何指定带有多个命名参数的路径？例如：/route?param1=val1&param2=val2 - rehman_00001

@rehman_00001我找到了解决相同问题的方法。 这里讲解得非常清楚 - Marvin Kang'

我能否隐藏地址栏中的参数？谢谢。 - Herbert Yeo

Answer 2

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

在组件中，使用来自 react-router-dom 的 useParams。

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

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

这里有一种解决方案，不需要使用props，而是使用路由库。

- Bikram Nath

---

在 Route 组件上使用 'exact' 属性对我很有帮助，谢谢。 - Karthik

Answer 3

试试这个

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

- Sultan Aslam

Answer 4

对于可选的参数字段，在花括号内部的冒号前没有斜杠也可以正常工作。React-router 2.6x

- Har