带有可选路径参数的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

当前回答

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

2020-02-18 08:30:29

其他回答

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

2020-02-18 08:30:29

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

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

2022-02-07 05:19:49

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

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

url可以是:

/节 /部分/ / 1页 /部分/页面/ 1 / / asc

2019-07-04 20:12:19

既然你提到了你的react-router版本为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>

2022-02-02 19:08:17

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

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

2020-09-07 11:35:22

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

推荐文章

最新文章

标签