React Router V6默认路由参数化：两种场景跳转异常求助

你的问题核心在于混淆了路径参数和查询参数的匹配逻辑：

• 你写的 <Route exact path="/:id" ...> 是匹配路径参数（比如 /123 这种格式），但你的场景2是查询参数 /?id=123，这类参数不属于路由路径的一部分，React Router 的路径匹配规则不会识别它，所以所有根路径请求都会命中 / 的重定向规则，跳转到 C1。

修改方案 #

需要在根路径的组件内部读取查询参数，根据参数值决定重定向目标：

1. 先创建一个处理重定向逻辑的组件：

import { useSearchParams, Navigate } from 'react-router-dom';

function RootRedirect() {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');

  // 根据是否存在id查询参数，跳转对应组件
  return id ? <Navigate to="/c2" replace /> : <Navigate to="/c1" replace />;
}

2. 修改路由配置，替换原有的根路径路由：

createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route element={<Layout />}>
        {/* 用自定义重定向组件处理根路径逻辑 */}
        <Route path="/" element={<RootRedirect />} />
        <Route path="c1" element={<C1 />} />
        <Route path="c2" element={<C2 />} />
      </Route>
    </>
  )
)

额外说明 #

React Router V6 已经移除了 exact 属性，路由默认采用精确匹配规则，所以不需要再写这个属性。

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