如何在React Router Dom V6中使用可选参数路径路由

你当前的写法存在两个核心问题：

1. 嵌套子路由的path不应以/开头，否则会被识别为绝对路径，脱离父路由的/mainview前缀
2. 未使用:参数名的格式定义动态参数，React Router无法将/id或/key识别为参数占位符

错误代码示例 #

<Routes>
  <Route path="/mainview">
    <Route path="/id" element={<MainView />} />
    <Route path="/key" element={<MainView />} />
  </Route>
</Routes>

正确实现方式 #

方式一：嵌套路由写法

修正子路由路径格式，用:参数名定义动态参数，同时移除子路由path的开头斜杠：

<Routes>
  <Route path="/mainview">
    <Route path=":id" element={<MainView />} />
    <Route path=":key" element={<MainView />} />
  </Route>
</Routes>

方式二：合并路径写法（更简洁）

利用React Router V6支持数组形式path的特性，在同一个Route中直接定义两种参数路径：

<Routes>
  // 分开写或合并成一行都可以
  <Route path="/mainview/:id" element={<MainView />} />
  <Route path="/mainview/:key" element={<MainView />} />
  
  {/* 合并写法 */}
  <Route path={["/mainview/:id", "/mainview/:key"]} element={<MainView />} />
</Routes>

在MainView组件中处理参数 #

通过useParams()获取参数后，判断参数存在性即可区分逻辑：

import { useParams } from 'react-router-dom';

function MainView() {
  const { id, key } = useParams();
  
  if (id) {
    // 处理id参数对应的逻辑
    console.log('当前传入id参数:', id);
  } else if (key) {
    // 处理key参数对应的逻辑
    console.log('当前传入key参数:', key);
  }
  
  return <div>Main View</div>;
}

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