React Router v6嵌套路由失效及重复匹配报错问题咨询

核心问题排查点 #

1. 根路由未正确渲染<Outlet /> #

如果App.js中把/auth作为/的子路由，父路由对应的组件必须渲染<Outlet />，否则子路由内容无法加载，这是嵌套路由生效的核心前提。
错误示例（App.js）：

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />}>
        <Route path="auth" element={<AuthApp />} />
      </Route>
    </Routes>
  );
}

这里Home组件缺少<Outlet />，AuthApp根本不会被渲染，/auth/login自然无法匹配。
修正：在Home组件中添加Outlet：

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Outlet /> {/* 用于渲染/auth路由的内容 */}
    </div>
  );
}

2. AuthApp中子路由配置错误 #

AuthApp作为嵌套路由的父组件，必须用<Routes>包裹子路由，且子路由路径需写相对路径（不能加/auth前缀）。
错误示例（AuthApp.js）：

function AuthApp() {
  return (
    <div>
      <Route path="/auth/login" element={<LoginRoute />} />
      <Route path="/auth/register" element={<RegisterRoute />} />
    </div>
  );
}

修正写法：

function AuthApp() {
  return (
    <div>
      <Routes>
        <Route path="login" element={<LoginRoute />} />
        <Route path="register" element={<RegisterRoute />} />
      </Routes>
    </div>
  );
}

3. 导航链接路径错误 #

确保Navbar中的Link组件使用正确路径：如果是全局导航，用绝对路径to="/auth/login"；如果是AuthApp内部的导航，用相对路径to="login"，路径错误会直接导致路由匹配失败。

重复报错的原因 #

控制台两次输出“No routes matched location "/auth/login"”，大概率是因为页面中存在多组<Routes>组件：

• 比如App.js有一组Routes，Navbar或其他无关组件中又额外添加了一组Routes，两组Routes同时尝试匹配/auth/login，但都无法找到对应路由，因此触发两次报错。
• 另一种可能是父路由未渲染Outlet，导致AuthApp未挂载，外层Routes找不到/auth/login的匹配项，而AuthApp内的Routes因未挂载也无法工作，但这种情况多为单次报错，多组Routes的可能性更高。

快速验证步骤 #

1. 检查App.js中，/路由对应的组件是否包含<Outlet />。
2. 确认AuthApp中用<Routes>包裹子路由，且子路由为相对路径。
3. 全局搜索项目中的<Routes>，确保只有外层根组件和嵌套路由父组件中存在该组件，删除多余的Routes。
4. 手动输入/auth/login后，通过React DevTools查看路由树，确认/auth路由是否被正确渲染，以及AuthApp内的子路由是否存在。

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