带有可选路径参数的React路由器

我想用一个可选的路径参数声明一个路径，因此当我把它添加到页面做一些额外的事情(例如填充一些数据):

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

在我的react路由器中，我有以下路径，为了支持这两个选项(这是一个简化的例子):

<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

268820 次浏览
小开
最佳答案

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

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

<强>注意:< / >强 __ABC0参数匹配一个URL段，直到下一个__ABC1， __ABC2或#。有关路径和参数的更多详细信息，阅读更多在这里。

React Router v4及以上版本

React Router v4与v1-v3有本质上的不同，并且可选路径参数在< >强官方文档< / >强中也没有显式定义。

相反，你被指示定义一个path参数，path-to-regexp可以理解。这允许在定义路径时具有更大的灵活性，例如重复模式、通配符等。因此，要将参数定义为可选参数，需要在后面添加一个问号(?)。

因此，要定义一个可选参数，你需要:

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

和用于多个可选参数:

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

<强>注意:< / >强 React Router v4是不兼容与 (阅读更多在这里)。请使用v3或更早版本(建议使用v2)。

小开

对于搜索后到达这里的任何React Router v4用户，<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} />
小开

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

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

url可以是:

  1. /节
  2. /部分/ / 1页
  3. /部分/页面/ 1 / / asc
小开

对于react-router V5，使用下面的多条路径语法

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

对于V6

<Route path="/teams" element={<Teams />}>
<Route index element={<TeamsIndex />} />
<Route path=":teamId" element={<Team />} />
</Route>
小开

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

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

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

然而，从React路由器v6开始，这个选项就变成了前面提到的删除。在这里

因此，对于React路由器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>
小开

正如Sayak所指出的，React Router V6已经删除了可选参数。我找到的最简单的解决方法就是分成两条路线。一个是没有参数的url，另一个是:

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

提交答案