我想用一个可选的路径参数声明一个路径,因此当我把它添加到页面做一些额外的事情(例如填充一些数据):
http://localhost/app/path/to/page <=渲染页面
http://localhost/app/path/to/page/pathParam <=渲染页面
一些数据根据pathParam
在我的react路由器中,我有以下路径,为了支持这两个选项(这是一个简化的例子):
<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)有效,并且不再有效。
React路由器v1, v2和v3
从1.0.0版本开始,你定义了以下可选参数:
<Route path="to/page(/:pathParam)" component={MyPage} />
对于多个可选参数:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
使用圆括号()来换行route的可选部分,包括前导斜杠(/)。请查看官方文档的“路由匹配指南”页面。
注意:paramName参数匹配下一个/、?或#的URL段。有关路径和参数的详细信息,请阅读此处。
React Router v4及以上版本
React Router v4与v1-v3有本质上的不同,官方文档中也没有明确定义可选路径参数。
相反,指示您定义path-to-regexp能够理解的路径参数。这允许在定义路径时具有更大的灵活性,例如重复模式、通配符等。因此,要将参数定义为可选参数,需要在后面添加一个问号(?)。
因此,要定义一个可选参数,你需要:
<Route path="/to/page/:pathParam?" component={MyPage} />
对于多个可选参数:
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
注意:React Router v4与React - Router -relay不兼容。请使用v3或更早版本(建议使用v2)。
既然你提到了你的react-router版本为1.0.3,你可以在之前的答案中找到你的解决方案。
然而,从React Router v6中,这个选项已经被删除了。在这里
因此,React Router v6如下:
<Route path='/page/:friendlyName/:sort?' element={<Page/>} />
将由:
<Route path='/page/:friendlyName/:sort' element={<Page/>} />
<Route path='/page/:friendlyName/' element={<Page/>} />
或者你也可以用:
<Route path="/page/:friendlyName">
<Route path=":sort" element={<Page />} />
<Route path="" element={<Page />} />
</Route>
您发布的编辑对旧版本的React-router (v0.13)有效,并且不再有效。
React路由器v1, v2和v3
从1.0.0版本开始,你定义了以下可选参数:
<Route path="to/page(/:pathParam)" component={MyPage} />
对于多个可选参数:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
使用圆括号()来换行route的可选部分,包括前导斜杠(/)。请查看官方文档的“路由匹配指南”页面。
注意:paramName参数匹配下一个/、?或#的URL段。有关路径和参数的详细信息,请阅读此处。
React Router v4及以上版本
React Router v4与v1-v3有本质上的不同,官方文档中也没有明确定义可选路径参数。
相反,指示您定义path-to-regexp能够理解的路径参数。这允许在定义路径时具有更大的灵活性,例如重复模式、通配符等。因此,要将参数定义为可选参数,需要在后面添加一个问号(?)。
因此,要定义一个可选参数,你需要:
<Route path="/to/page/:pathParam?" component={MyPage} />
对于多个可选参数:
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
注意:React Router v4与React - Router -relay不兼容。请使用v3或更早版本(建议使用v2)。