小编典典

使用可选的路径参数来响应路由器

reactjs

我想用可选的path参数声明一个路径，因此当我添加它时，页面会做一些额外的事情（例如，填充一些数据）：

http：// localhost / app / path / to /
page <=渲染页面 http：// localhost / app /
path / to / page / pathParam
<=根据pathParam使用某些数据渲染页面

在我的React Router中，我具有以下路径，以支持两个选项（这是一个简化的示例）：

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

我的问题是，我们可以在一条路线中声明吗？如果仅添加第二行，则找不到没有参数的路由。

编辑＃1：

这里提到的有关以下语法的解决方案对我不起作用，这是一个合适的解决方案吗？文档中是否存在？

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

我的react-router版本是：1.0.3

阅读 297

2020-07-22

共1个答案

小编典典

您发布的修改对旧版本的React-router（v0.13）有效，并且不再起作用。

反应路由器v1，v2和v3

从版本开始，1.0.0您可以通过以下方式定义可选参数：

<Route path="to/page(/:pathParam)" component={MyPage} />

以及多个可选参数：

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

您可以使用括号( )来包装路线的可选部分，包括前导斜杠（/）。请查看官方文档的“
路线匹配指南” 页面。

注：
该:paramName参数相匹配的URL段到下一个/，?或#。有关具体的路径和参数的更多信息，请参见此处。

React Router v4及更高版本

React Router v4从根本上不同于v1-v3，并且 官方文档中 也没有明确定义可选路径参数。

而是，指示您定义path-to-regexp可以理解的path参数。这样可以在定义路径（例如重复模式，通配符等）时提供更大的灵活性。因此，要将参数定义为可选参数，请添加尾随的问号（）。?

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

<Route path="/to/page/:pathParam?" component={MyPage} />

以及多个可选参数：

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

注意： React Router v4 与react-router-relay
不兼容 （在此处了解更多信息）。请改用v3或更低版本（建议使用v2）。

2020-07-22