我想用可选的path参数声明一个路径,因此当我添加它时,页面会做一些额外的事情(例如填充一些数据):
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>
我的问题是,我们可以在oneroute中声明它吗?如果我只添加第二行,那么没有参数的route就找不到了。
编辑编号1:
here中提到的解决方案对我来说不起作用,它是正确的吗?文档中有吗?
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />
我的React路由器版本是:1.0.3
7条答案
按热度按时间6rqinv9w1#
您发布的编辑对旧版本的React-router(v0.13)有效,不再有效。
响应路由器v1、v2和v3
从
1.0.0
版本开始,您可以使用以下选项定义可选参数:对于多个 * 可选 * 参数:
您可以使用括号
(
)
将route的可选部分括起来,* 包括 * 前导斜杠(/
)。请查看官方文档的Route Matching Guide页。注意:**
:paramName
参数匹配URL段,直到下一个/
、?
或#
。有关路径和参数的详细信息,请在此处阅读详细信息。React路由器v4及更高版本
React Router v4与v1-v3有根本的不同,official documentation中也没有显式定义可选的路径参数。
相反,您需要定义一个path-to-regexp可以理解的
path
参数,这样可以更灵活地定义路径,例如重复模式、通配符等。因此,要将参数定义为可选,请添加一个尾随问号(?
)。因此,要定义可选参数,请执行以下操作:
型
对于多个 * 可选 * 参数:
***注意:***React Router v4与react-router-relay(read more here)不兼容。请改用v3或更早版本(建议使用v2)。
ijnw1ujt2#
对于搜索后到达此处的任何React Router v4用户,
<Route>
中的可选参数用?
后缀表示。以下是相关文档:
https://reacttraining.com/react-router/web/api/Route/path-string
路径:字符串
path-to-regexp可以理解的任何有效URL路径。
https://www.npmjs.com/package/path-to-regexp#optional
可选
参数可以后缀问号(?)使参数可选。这也将使前缀可选。
网站分页部分的简单示例,可以使用或不使用页码访问。
fdbelqdn3#
多个可选参数的工作语法:
现在,url可以是:
1./节
1./节/页/1
1./节/页/1/排序/升序
sqserrrh4#
既然你提到了你的React路由器版本是1.0.3,你可以在前面的答案中找到你的解决方案。
但是,如前所述,React Router v6已删除此选项。here
因此,对于React Router v6,如下所示:
将替换为:
或者您也可以用途:
型
iibxawm45#
对于react-routerV5,请使用以下语法 * 多个路径 *
适用于V6
vlurs2pr6#
与常规参数一样,声明可选参数只是Route的path属性的问题;任何以问号结尾的参数都将被视为可选参数:
t40tm48m7#
正如Sayak所指出的,React Router V6中已经删除了可选参数,我发现最简单的解决方案是只创建两个路由,一个用于url,没有参数,另一个带有: