Javascript 带有可选路径参数的react 路由

发布于02月24日

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

http://localhost/app/path/to/page&lt；=呈现页面

在react路由中，为了支持这两个选项，我有以下路径(这是一个简化的示例):

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

我的问题是，我们可以在one路申报吗？如果我只添加第二行，则找不到没有该参数的路由.

EDIT#1:

关于以下语法的解决方案对我不起作用，它是正确的吗？文件中有吗？

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

我的react 路由版本是:1.0.3

React Router v1, v2 and v3

从版本1.0.0开始，您可以使用以下选项定义可选参数:

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

对于多个optional个参数:

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

您可以使用括号( )来包装route including的可选部分，并使用前导斜杠(/).查看Route Matching Guide页的官方文件.

105 The 101 parameter matches a URL segment up to the next 102, 103, or 104. For more about paths and params specifically, 100.

React Router v4 and above

Reaction路由v4从根本上不同于v1-v3，可选路径参数在official documentation中也没有明确定义.

相反，系统会指示您定义path-to-regexp可以理解的path参数.这允许在定义路径时有更大的灵活性，例如重复模式、通配符等.因此，要将参数定义为可选参数，需要添加一个尾随问号(?).

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

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

对于多个optional个参数:

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

Note: React Router v4 is incompatible with react-router-relay (read more here). Use version v3 or earlier (v2 recommended) instead.

Javascript相关问答推荐

判断现代浏览器中的点击是否由touch 触发

ChartJS：分组堆叠条形图渲染错误

为什么我会获取MUI Date TimePicker TypHelp：Value.isValid不是AdapterDayjs.isValid中的函数

详细更改参考价值："

事件错误：类型错误：无法读取未定义的属性(读取stopPropagation)

单击按钮后未清除 Select

如何在不分配整个数组的情况下修改包含数组的行为主体？

为什么getRecord()会因为与_logger相关的错误而失败？(使用Hedera SDK)

有Angular 的material .未应用收件箱中的价值变化

使用json文件字符串来enum显示类型字符串无法按照计算的enum成员值的要求分配给类型号

根据总价格对航班优惠数组进行排序并检索前五个结果- Angular HTTP请求

调用removeEvents不起作用

如何在angular中从JSON值添加动态路由保护？

当运行d3示例代码时，没有显示任何内容

使用Java脚本根据按下的按钮更改S文本

查找最长的子序列-无法重置数组

为什么Mutations 观察器用微任务队列而不是macrotask队列处理？

为什么我的自定义元素没有被垃圾回收？

为什么这个.add.group({})在教程中运行得很好，但在我的游戏中就不行了？

当我try 将值更改为True时，按钮不会锁定

实用课程推荐

推荐答案

React Router v1, v2 and v3

React Router v4 and above

Javascript相关问答推荐