402

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

http://localhost/app/path/to/page <= 渲染页面 http://localhost/app/path/to/page/pathParam <= 根据 pathParam 用一些数据渲染页面

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

<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

4

8 回答 8

789

您发布的编辑对旧版本的 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} />

您使用括号( )来包装路由的可选部分，包括前导斜杠 ( /)。查看官方文档的路由匹配指南页面。

注意： 该:paramName参数匹配一个 URL 段，直到下一个/、?或#。有关具体路径和参数的更多信息，请在此处阅读更多信息。

React 路由器 v4 及更高版本

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

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

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

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

对于多个可选参数：

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

注意： React Router v4与不兼容（在此处阅读更多内容）。请改用 v3 或更早版本（推荐 v2）。

于 2016-02-24T14:28:04.650 回答
99

对于搜索后到达这里的任何 React Router v4 用户，a 中的可选参数<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} />
于 2016-11-29T17:48:18.360 回答
45

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

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

现在，url 可以是：

  1. /部分
  2. /节/页/1
  3. /section/page/1/sort/asc
于 2019-07-04T20:12:19.493 回答
12

对于 react-router V5 及更高版本，请使用以下多路径语法

<Route
          exact
          path={[path1, path2]}
          component={component}
        />
于 2020-02-18T08:30:29.390 回答
5

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

<Route path="to/page/:pathParam?" component={MyPage}/>
于 2020-09-07T11:35:22.937 回答
3

好吧，既然您提到您的 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>

于 2022-02-02T19:08:17.693 回答
1

正如 Sayak 所指出的，可选参数已从 React Router V6 中删除。我发现的最简单的解决方案是只制作两条路线。一个用于不带参数的 url，另一个用于：

<Route path="/product/:productName/" handler={SomeHandler} />
<Route path="/product/:productName/:urlID?" handler={SomeHandler} />
于 2022-02-07T05:19:49.487 回答
0

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

例如。

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

这样做的好处是你必须props.match玩，而且你不必担心检查可选参数的值：

{ props: { match: { "0": "exact" } } }
于 2020-11-05T05:05:56.090 回答