React Router具有可选的路径参数

Question

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

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

我的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匹配段到下一个/,?或#.有关路径和参数的更多信息,请在此处阅读更多内容.

反应路由器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 与react-router-relay 不兼容(在此处阅读更多内容).请改用v3或更早版本(推荐使用v2).

Answer 2

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

这是相关文档:

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

路径:字符串

路径到regexp可以理解的任何有效URL路径.

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

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

可选的

参数可以带有问号(？),以使参数可选.这也将使前缀可选.

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

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

Answer 3

既然您提到您的反应路由器版本为 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>

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

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

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

Answer 7

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

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