React Router v6子路由无法正确渲染对应组件问题排查

核心问题分析 #

1. 路由匹配顺序错误：你将通配符路由path="*"放在了已登录路由组的最前面，React Router v6 的<Routes>会按顺序匹配路由，第一个匹配的路由会直接渲染，导致后续所有具体路由（/、/dashboard、planning/*等）完全被拦截。
2. 父路由未使用<Outlet />：planning/*的父路由设置了element={<PageNotFound />}，但没有引入<Outlet />组件，子路由的内容没有渲染出口，即使子路由匹配成功也无法显示。
3. 语法错误：<Route path="individual" element={<IndividualPlanning />}缺少闭合标签/>，会导致代码编译失败。

修正后的完整路由配置 #

import { Outlet } from 'react-router-dom'; // 需要导入Outlet组件

<Routes>
  {!isLogged() ? (
    <>
      <Route path="/login" element={<LoginPage />} />
      <Route path="*" element={<Navigate to="/login" />} />
    </>
  ) : (
    <>
      <Route path="/login" element={<Navigate to="/" />} />
      <Route path="/" element={<HomePage />} />
      <Route path="/dashboard" element={<Dashboard />} />

      {/* 修复后的planning路由组 */}
      <Route path="planning" element={<Outlet />}>
        {/* 访问/planning时默认渲染IndividualPlanning，若要显示404可替换为<PageNotFound /> */}
        <Route index element={<IndividualPlanning />} />
        <Route path="individual" element={<IndividualPlanning />} />
        <Route path="team" element={<TeamPlanning />} />
        {/* 匹配/planning下未定义的子路径，返回404 */}
        <Route path="*" element={<PageNotFound />} />
      </Route>

      {/* 全局404路由必须放在所有具体路由之后 */}
      <Route path="*" element={<PageNotFound />} />
    </>
  )}
</Routes>

关键修改说明 #

• 调整路由顺序：将所有具体路径路由放在通配符路由之前，确保合法路径能被优先匹配。
• 添加子路由出口：父路由planning的element改为<Outlet />，这是React Router v6中渲染子路由内容的必填组件。
• 精准匹配子路径：在planning子路由末尾添加通配符路由，专门处理/planning下的无效子路径。
• 修复语法问题：补全individual路由的闭合标签，保证代码正常编译。

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