具有可选路径参数的反应路由器React Router v1、v2 和 v3React Router v4 及更高版本

javascript reactjs react-router react-router-v4

2022-08-29 23:24:12

我想用一个可选的路径参数声明一个路径，因此当我添加它时，页面会做一些额外的事情（例如，填写一些数据）：

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} />

我的反应路由器版本是：1.0.3

答案 1

您发布的编辑对旧版本的 React-router （v0.13）有效，不再有效。

React Router v1、v2 和 v3

从版本开始，您可以通过以下方式定义可选参数：1.0.0

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

对于多个可选参数：

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

使用括号将路由的可选部分（包括前导斜杠（））换行。查看官方文档的路线匹配指南页面。()/

注意：:p aramName 参数将 URL 段与下一个 /、？ 或 # 匹配。有关路径和参数的更多信息，请在此处阅读更多内容。

React Router v4 及更高版本

React Router v4 与 v1-v3 有根本的不同，可选路径参数也没有在官方文档中明确定义。

相反，系统会指示您定义正则表达式路径可以理解的参数。这允许在定义路径时具有更大的灵活性，例如重复模式，通配符等。因此，要将参数定义为可选参数，请添加尾随问号（）。path?

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

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

对于多个可选参数：

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

注意：React Router v4 与 react-router-relay 不兼容（在此处阅读更多内容）。请改用版本 v3 或更早版本（建议使用 v2）。

答案 2

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

路径：字符串

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

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

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

自选

参数可以以问号（？）为后缀，以使参数可选。这也将使前缀成为可选的。

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

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

具有可选路径参数的反应路由器React Router v1、v2 和 v3React Router v4 及更高版本

React Router v1、v2 和 v3

React Router v4 及更高版本

参数可以以问号 （？） 为后缀，以使参数可选。这也将使前缀成为可选的。

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

参数可以以问号（？）为后缀，以使参数可选。这也将使前缀成为可选的。