React Router嵌套路由问题：OrganizationView下子组件无法渲染

在React项目中使用React Router Dom实现多层嵌套路由时，添加OrganizationView路由后，其下所有子嵌套路由均无法正常显示。控制台无报错，URL符合预期，但下游组件完全不渲染。

错误代码示例 #

<Route path="/" element={<App />}>
  <Route path="/login" element={<LoginScreen />} />
  <Route path="" element={<PrivateRoute />}>
    <Route index={true} path="/" element={<Home />} />
    <Route
      path="/organizations/:organizationId"
      element={<OrganizationView />}
    >
      <Route
        path="/organizations/:organizationId/home"
        element={<Home />}
      />
      <Route
        path="/organizations/:organizationId/clients/:clientId"
        element={<ClientView />}
      >
        <Route
          path="/organizations/:organizationId/clients/:clientId/dashboard"
          element={<ClientDashboard />}
        />
      </Route>
    </Route>
  </Route>
</Route>

问题根源 #

1. 嵌套路由路径写法错误：React Router v6中，嵌套的子路由应该使用相对路径，而非完整路径。完整路径会让子路由脱离父路由的嵌套关系，导致父组件无法控制子组件渲染。
2. 父组件缺少<Outlet />：OrganizationView和ClientView作为嵌套路由的父组件，内部必须渲染<Outlet />组件，React Router才能将匹配到的子路由内容插入到对应位置。

修正后的代码 #

第一步：修改路由路径为相对路径

<Route path="/" element={<App />}>
  <Route path="/login" element={<LoginScreen />} />
  <Route path="" element={<PrivateRoute />}>
    <Route index element={<Home />} />
    <Route path="organizations/:organizationId" element={<OrganizationView />}>
      {/* 相对路径：直接写home，继承父路由的path */}
      <Route path="home" element={<Home />} />
      {/* 相对路径：写clients/:clientId */}
      <Route path="clients/:clientId" element={<ClientView />}>
        {/* 相对路径：写dashboard */}
        <Route path="dashboard" element={<ClientDashboard />} />
      </Route>
    </Route>
  </Route>
</Route>

第二步：在父组件中添加<Outlet />

比如在OrganizationView组件内：

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

function OrganizationView() {
  return (
    <div>
      {/* 这里是OrganizationView自身的内容 */}
      <h1>组织详情页</h1>
      {/* 子路由的内容会渲染到这里 */}
      <Outlet />
    </div>
  );
}

同样，ClientView组件也需要添加<Outlet />：

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

function ClientView() {
  return (
    <div>
      <h2>客户详情</h2>
      <Outlet />
    </div>
  );
}

额外提示 #

• index路由可以直接写index element={<Home />}，不需要再加path="/"，更简洁。
• PrivateRoute如果是路由守卫组件，需要确保它内部也渲染<Outlet />，否则其下的路由无法正常显示。

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