reactjs 具有可选路径参数的React路由器

cgyqldqp  于 2022-12-18  发布在  React
关注(0)|答案(7)|浏览(164)

我想用可选的path参数声明一个路径,因此当我添加它时,页面会做一些额外的事情(例如填充一些数据):
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>

我的问题是,我们可以在oneroute中声明它吗?如果我只添加第二行,那么没有参数的route就找不到了。

编辑编号1:

here中提到的解决方案对我来说不起作用,它是正确的吗?文档中有吗?

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

我的React路由器版本是:1.0.3

6rqinv9w

6rqinv9w1#

您发布的编辑对旧版本的React-router(v0.13)有效,不再有效。

响应路由器v1、v2和v3

1.0.0版本开始,您可以使用以下选项定义可选参数:

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

对于多个 * 可选 * 参数:

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

您可以使用括号()将route的可选部分括起来,* 包括 * 前导斜杠(/)。请查看官方文档的Route Matching Guide页。

注意:**:paramName参数匹配URL段,直到下一个/?#。有关路径和参数的详细信息,请在此处阅读详细信息。

React路由器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-relayread more here不兼容。请改用v3或更早版本(建议使用v2)。

ijnw1ujt

ijnw1ujt2#

对于搜索后到达此处的任何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} />
fdbelqdn

fdbelqdn3#

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

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

现在,url可以是:
1./节
1./节/页/1
1./节/页/1/排序/升序

sqserrrh

sqserrrh4#

既然你提到了你的React路由器版本是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>

iibxawm4

iibxawm45#

对于react-routerV5,请使用以下语法 * 多个路径 *

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

适用于V6

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

vlurs2pr6#

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

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

t40tm48m7#

正如Sayak所指出的,React Router V6中已经删除了可选参数,我发现最简单的解决方案是只创建两个路由,一个用于url,没有参数,另一个带有:

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

相关问题