React Router v4中如何匹配带不同参数的两条路由？

这个问题我之前也碰到过，你用/(|:value)的写法没法生效，是因为React Router的路径分组语法只支持字面量字符串的可选分支，动态参数不能这么嵌套在分组里。而/(|mypath)能生效，是因为mypath是固定的字面量，符合分组匹配的规则。下面给你两种靠谱的解决方案：

方案一：使用可选参数（推荐） #

React Router支持在参数后面加?来标记它是可选的，这样一条路由就能同时匹配根路径和带参数的路径：

<Route path="/:value?" render={(props) => {
  return <MyComponent />
}} />

这里的:value?表示value参数是可选的，所以这条路由会匹配：

• 根路径 /
• 任意单个参数的路径，比如 /abc、/123、/user123 等

如果是React Router v6版本，写法调整为用element属性：

<Route path="/:value?" element={<MyComponent />} />

方案二：拆分两条路由 #

如果觉得可选参数的写法不够直观，也可以直接写两条路由，指向同一个组件：

// React Router v5及以下版本，根路由需要加exact确保精确匹配
<Route exact path="/" render={(props) => {
  return <MyComponent />
}} />
<Route path="/:value" render={(props) => {
  return <MyComponent />
}} />

React Router v6版本中，因为默认是精确匹配，所以不需要加exact，直接用Routes包裹即可：

<Routes>
  <Route path="/" element={<MyComponent />} />
  <Route path="/:value" element={<MyComponent />} />
</Routes>

两种方案都能满足你的需求，个人更推荐方案一，代码更简洁，也符合React Router的设计语法。

内容的提问来源于stack exchange，提问作者turtle