带有可选路径参数的 React Router

Question

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

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

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

<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：

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

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

我的 react-router 版本是：1.0.3

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

您使用圆括号 ( ) 来包裹路由的可选部分，包括前导斜杠 (/)。查看官方文档的 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）。

Answer 2

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

可以在参数后加上问号 (?) 使参数可选。这也将使前缀成为可选的。

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

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

Answer 3

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

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

现在，url 可以是：

/节
/section/page/1
/section/page/1/排序/asc

Answer 4

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

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

Answer 5

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

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

Answer 6

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

例如

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

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

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

Answer 7

既然你提到你的 react-router 版本是 1.0.3，你可以在前面的答案中找到你的解决方案。

然而，从 React Router v6 开始，此选项已被删除，如前所述。 here

因此对于 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>

Answer 8

正如 Sayak 指出的那样，可选参数已从 React Router V6 中删除。我发现的最简单的解决方案是只做两条路线。一个用于没有参数的 url 和一个带有：

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

带有可选路径参数的 React Router

React Router with optional path parameter

javascript

reactjs

react-router

react-router-v4

React Router v1、v2 和 v3

React Router v4 及以上版本

可以在参数后加上问号 (?) 使参数可选。这也将使前缀成为可选的。

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