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


306

我想用可选的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

Answers:


650

您发布的修改对旧版本的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 与以下版本不兼容在这里阅读更多)。请改用v3或更低版本(建议使用v2)。


2
这仍然是有关URL中多个可选参数的问题,例如/route(/:category/(:article)
Alex Shwarc '17

1
@AlexShwarc,很好,谢谢。我添加了代码来演示多个可选参数。看一看。
克里斯(Chris)

1
@Chris我敢肯定,这种方式行不通,您检查了吗?
Alex Shwarc '17

@Chris具有3个版本
Alex Shwarc

1
我可以为主要路线创建可选的路径参数吗?例如,我需要在路径中添加语言参数,并且我的主页网址将为“ /”和“ / en”。这是演示
Kholiavko

76

对于搜索后到达此处的任何React Router v4用户,a <Route>中的可选参数都用?后缀表示。

以下是相关文档:

https://reacttraining.com/react-router/web/api/Route/path-string

路径:字符串

到正则表达式路径可以理解的任何有效URL路径。

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#可选

可选的

可以在参数后加上问号(?),以使参数可选。这还将使前缀为可选。


站点的分页部分的简单示例,可以使用或不使用页码进行访问。

<Route path="/section/:page?" component={Section} />

@ user2928231谢谢,更新了他们的新文档url。据我所知<Match pattern />,现在<Route path />仍然可以使用问号后缀来处理可选参数。
约翰,

2
嗨!我仍然有可选的参数问题,不能让工作未来路线:我有playersplayers/123players/123/editplayers?unseen=true。可选参数?unseen对我不起作用。尽管我尝试了此讨论中的所有修复程序。您能为您提供正确的路径字符串吗?提前致谢!
Khrystyna Skvarok

@KhrystynaSkvarok,您好,您是否知道如何使用可选查询字符串来获取路径?我正在尝试做同样的事情
sabliao

2
@sabliao嗨!我没有有效的示例,但是对于类似URL的example.com/search?query=test尝试使用next pattern /:search(search)
Khrystyna Skvarok '18

分隔符后如何从url获取参数?
PHP Ninja

15

多个可选参数的工作语法:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

现在,URL可以是:

  1. /部分
  2. / section / page / 1
  3. / section / page / 1 / sort / asc

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.