React Router具有可选的路径参数 [英] React Router with optional path parameter

问题描述

我想声明一个带有可选路径参数的路径，因此当我添加页面以执行额外的操作时（例如填充一些数据）：

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 < =渲染页面
http：// localhost / app / path / to / page / pathParam < =根据pathParam使用
渲染页面一些数据

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

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

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 one route? If I add only the second row then the route without the parameter is not found.

编辑＃1：

关于以下语法的此处提及的解决方案不起作用我，这是一个合适的吗？它是否存在于文档中？

The solution mentioned here about 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} />

我的react-router版本是：1.0.3

My react-router version is: 1.0.3

推荐答案

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

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

由于版本 1.0.0 你定义可选参数：

Since version 1.0.0 you define optional parameters with:

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

以及多个可选参数：

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

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

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

注意： ：paramName 参数匹配的URL段直到下一个 / ，？，或＃。有关路径和参数的更多信息，请在此处阅读更多信息。

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

React Router v4与v1-v3根本不同，并且未在 官方文档 。

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

相反，您被指示定义路径 path-to-regexp 理解的参数。这样可以更灵活地定义路径，例如重复模式，通配符等。因此，要将参数定义为可选参数，请添加尾随问号（？） 。

Instead, you are instructed to define a path parameter that path-to-regexp understands. 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 (?).

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

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

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

以及多个可选参数：

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

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

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

这篇关于React Router具有可选的路径参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！