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

反应路由器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

Answer 2

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

在组件中，使用useParamsfrom 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

尝试这个

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