React Router DOM v6.19.0路径导航错误问题求助

问题根源 #

1. 子路由路径错误：RouteOneList 中的子路由使用了绝对路径（以 / 开头），导致实际匹配的是根路径下的 /add/test/1，而非预期的 /route1/add/test/1。
2. 参数路由优先匹配：外层的 /route1/:one/:two/:three 会直接匹配 /route1/add/test/1——add、test、1 恰好对应三个 URL 参数，因此命中了 RouteAnother 组件。

解决步骤 #

1. 修正子路由为相对路径

将 RouteOneList 内的子路由路径改为相对路径（去掉开头的 /），React Router 会自动拼接父路由路径，形成正确的 /route1/add/:type/:id 匹配规则：

// RouteOneList 组件内的子路由配置
<Route path="add/:type/:id" element={<AddComponent />} />

2. 父组件添加 Outlet 渲染子路由

RouteOneList 作为嵌套路由的父组件，必须通过 <Outlet /> 来渲染子路由内容，否则 AddComponent 无法显示：

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

function RouteOneList() {
  return (
    <div>
      {/* 父组件自身内容 */}
      <Outlet /> {/* 子路由组件将渲染在此处 */}
    </div>
  );
}

3. 优化外层路由顺序（可选）

将更具体的路由放在通配符路由之前，遵循「具体路由优先」原则，避免后续匹配冲突：

// 外层路由配置
<Route path="/route1/:one/:two/:three" element={<RouteAnother />} />
<Route path="/route1/*" element={<RouteOneList />} />

调整完成后，访问 /route1/add/test/1 会正确匹配到 AddComponent 组件。

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