我想用可选的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
您发布的修改对旧版本的React-router(v0.13)有效,并且不再起作用。
反应路由器v1,v2和v3
从版本开始,1.0.0您可以通过以下方式定义可选参数:
1.0.0
<Route path="to/page(/:pathParam)" component={MyPage} />
以及多个 可选 参数:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
您可以使用括号( )来包装路线的可选部分, _包括_前导斜杠(/)。请查看官方文档的“路线匹配指南”页面。
(
)
/
注: _该:paramName参数相匹配的URL段到下一个/,?或#。有关具体的路径和参数的更多信息
:paramName
?
#
React Router v4及更高版本
React Router v4从根本上不同于v1-v3,并且 官方文档中 也没有明确定义可选路径参数。
而是,指示您定义path-to-regexp可以理解的path参数。这样可以在定义路径(例如重复模式,通配符等)时提供更大的灵活性。因此,要将参数定义为可选参数,请添加尾随问号()。?
path
因此,要定义可选参数,请执行以下操作:
<Route path="/to/page/:pathParam?" component={MyPage} />
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
注意: _React Router v4 与react-router-relay不兼容 (在此处了解更多信息)。请改用v3或更低版本(建议使用v2)。[](file:///C:/questions/tagged/react-router-relay “显示标记为“ react-router-relay”的问题”