React Router嵌套路由不渲染：如何正确构建路由结构？

核心问题排查 #

你的ScoreDetailsTab无法渲染，大概率是以下几个原因导致：

1. 父路由未配置子路由匹配规则 #

主路由中/games/:gameName的路径没有添加*，导致React Router无法匹配该路径下的嵌套子路由。修改主路由配置：

<WrappedRoute
  path="/games/:gameName/*"  {/* 添加*以匹配所有子路由 */}
  page={GamesPage}
  component={GamePage}
  publicRoute
/>

<WrappedRoute
  path="/games"
  page={GamesPage}
  component={Games}
  content={children}
  publicRoute
/>

2. GamePage未添加<Outlet /> #

React Router v6中，嵌套路由的子组件必须通过<Outlet />渲染，若未在GamePage中放置该组件，子路由内容永远不会显示。修改GamePage：

import { Routes, Route, Outlet } from 'react-router-dom';

function GamePage() {
  return (
    <div>
      <GamePageMenu />
      {/* 必须添加Outlet来承载子路由组件 */}
      <Outlet />
      <Routes>
        <Route path="" element={<ScoresTab />} />
        {/* 子路由使用相对路径，无需重复父路由前缀 */}
        <Route path="score-details/:scoreId" element={<ScoreDetailsTab />} />
      </Routes>
    </div>
  );
}

3. 链接路径配置错误 #

检查ScoresTab中的跳转链接，确保路径正确：

• 相对路径写法（推荐）：

<Link to={`score-details/${score.id}`}>查看详情</Link>

• 绝对路径写法：

<Link to={`/games/${gameName}/score-details/${score.id}`}>查看详情</Link>

4. WrappedRoute组件的实现问题 #

确保自定义路由组件正确传递路由上下文，示例实现：

function WrappedRoute({ component: Component, page: Page, ...rest }) {
  return (
    <Route
      {...rest}
      element={
        <Page>
          <Component />
        </Page>
      }
    />
  );
}

更优路由结构方案 #

推荐使用React Router v6的标准嵌套路由结构，将所有路由集中管理，层级关系更清晰：

import { Routes, Route } from 'react-router-dom';

// 主路由配置
function AppRoutes() {
  return (
    <Routes>
      {/* GamesPage作为父布局，承载所有games相关页面 */}
      <Route path="/games" element={<GamesPage />}>
        {/* 默认显示游戏列表 */}
        <Route index element={<Games />} />
        {/* 单个游戏的父路由 */}
        <Route path=":gameName" element={<GamePage />}>
          {/* 默认显示计分板 */}
          <Route index element={<ScoresTab />} />
          {/* 计分板详情 */}
          <Route path="score-details/:scoreId" element={<ScoreDetailsTab />} />
          {/* 可扩展其他子路由，比如赛程、战队 */}
          <Route path="schedule" element={<ScheduleTab />} />
          <Route path="teams" element={<TeamsTab />} />
        </Route>
      </Route>
    </Routes>
  );
}

这种结构下：

• GamesPage只需放置一个<Outlet />，用来渲染Games或GamePage
• GamePage内再放置一个<Outlet />，用来渲染ScoresTab、ScoreDetailsTab等子组件
• 所有路由规则集中在一处，便于维护和扩展

额外检查点 #

• 确认React Router版本为v6（v5与v6路由API差异极大）
• 检查组件导入是否存在拼写错误
• 查看控制台是否有隐藏的路由匹配错误（比如未捕获的组件渲染异常）

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