带有可选路径参数的反应路由器

Question

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

http://localhost/app/path/to/page http://localhost/app/path/to/page/pathParam

在我的反应路由器中，我有以下路径，以支持这两个选项（这是一个简化的示例）：

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

我的问题是，我们可以在 one 路线中声明它吗？如果我只添加第二行，则找不到没有参数的路由。

编辑#1：

here 提到的关于以下语法的解决方案对我不起作用，它是正确的吗？它存在于文档中吗？

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

我的 react-router 版本是：1.0.3

Answer 1

如果您要进行完全匹配，请使用以下语法： (param)?.

例如。

<Route path={`my/(exact)?/path`} component={MyComponent} />

这样做的好处是您可以使用props.match，而且您不必担心检查可选参数的值：

{ props: { match: { "0": "exact" } } }

Answer 2

与常规参数一样，声明可选参数只是 Route 的 path 属性的问题；任何以问号结尾的参数都将被视为可选参数：

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

Answer 3

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

以下是相关文档：

https://reacttraining.com/react-router/web/api/Route/path-string

路径：字符串

path-to-regexp 可以理解的任何有效 URL 路径。

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

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

可选

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

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

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

Answer 4

对于 react-router V5 及更高版本，多路径

使用以下语法

<Route
          exact
          path={[path1, path2]}
          component={component}
        />

Answer 5

多个可选参数的工作语法：

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

现在，url 可以是：

1. /节
2. /section/page/1
3. /section/page/1/sort/asc

Answer 6

您发布的编辑对旧版本的 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 Matching Guide页面。

注意： :paramName 参数匹配一个 URL 段，直到下一个 /、? 或 #。有关路径和参数的更多信息，请read more here。

---

React Router v4 及更高版本

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

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

因此，要定义可选参数，您可以：

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

对于多个可选参数：

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

注意： React Router v4 与react-router-relay (read more here)不兼容。请改用 v3 或更早版本（推荐 v2）。