Javascript 使用可选路径参数反应路由器

React Router with optional path parameter

提问by tbo

I want to declare a path with an optional path parameter, hence when I add it the page to do something extra (e.g. fill some data):

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

http://localhost/app/path/to/page<= render the page http://localhost/app/path/to/page/pathParam<= render the page with some data according to the pathParam

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

In my react router I have the following paths, in order to support the two options (this is a simplified example):

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

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

My question is, can we declare it in oneroute? If I add only the second row then the route without the parameter is not found.

我的问题是，我们可以在一条路线上申报吗？如果我只添加第二行，那么没有找到没有参数的路由。

EDIT#1:

编辑#1：

The solution mentioned hereabout the following syntax did not work for me, is it a proper one? Does it exist in the documentation?

这里提到的关于以下语法的解决方案对我不起作用，它是否合适？它是否存在于文档中？

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

My react-router version is: 1.0.3

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

回答by Chris

The edit you posted was valid for an older version of React-router (v0.13) and doesn't work anymore.

您发布的编辑对旧版本的 React-router (v0.13) 有效并且不再起作用。

---

---

React Router v1, v2 and v3

反应路由器 v1、v2 和 v3

Since version 1.0.0you define optional parameters with:

从版本开始，1.0.0您定义了可选参数：

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

and for multiple optionalparameters:

以及多个可选参数：

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

You use parenthesis ()to wrap the optional parts of route, includingthe leading slash (/). Check out the Route Matching Guidepage of the official documentation.

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

Note:The :paramNameparameter matches a URL segment up to the next /, ?, or #. For more about paths and params specifically, read more here.

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

---

---

React Router v4 and above

React Router v4 及更高版本

React Router v4 is fundamentally different than v1-v3, and optional path parameters aren't explicitly defined in the official documentationeither.

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

Instead, you are instructed to define a pathparameter that path-to-regexpunderstands. This allows for much greater flexibility in defining your paths, such as repeating patterns, wildcards, etc. So to define a parameter as optional you add a trailing question-mark (?).

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

As such, to define an optional parameter, you do:

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

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

and for multiple optionalparameters:

以及多个可选参数：

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

Note:React Router v4 is incompatiblewith react-router-relay(read more here). Use version v3 or earlier (v2 recommended) instead.

注意：React Router v4与react-router-relay不兼容（在这里阅读更多）。请改用 v3 或更早版本（推荐 v2）。

回答by John

For any React Router v4 users arriving here following a search, optional parameters in a <Route>are denoted with a ?suffix.

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

Here's the relevant documentation:

这是相关文档：

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

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

path: string

Any valid URL path that path-to-regexpunderstands.

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

路径：字符串

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

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

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

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

Optional

Parameters can be suffixed with a question mark (?) to make the parameter optional. This will also make the prefix optional.

可选的

参数可以以问号 (?) 为后缀，使参数可选。这也将使前缀可选。

---

---

Simple example of a paginated section of a site that can be accessed with or without a page number.

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

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

回答by Nebojsa Sapic

Working syntax for multiple optional params:

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

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

Now, url can be:

现在，网址可以是：

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

1. /部分
2. /节/页/1
3. /section/page/1/sort/asc

回答by Nishant Singh

for react-router V5 and aboveuse below syntax for multiple paths

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

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