React Router Dom嵌套路由布局不显示子路由内容问题求助

核心原因 #

你的UserLayout组件缺少react-router-dom v6嵌套路由必需的<Outlet />组件——v6中嵌套子路由的内容不会通过children传递，而是需要父路由组件通过<Outlet />指定渲染位置。

修复步骤 #

1. 在UserLayout中导入Outlet
2. 替换原代码中的{children}为<Outlet />

修改后的UserLayout代码：

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

export function UserLayout() {
  return (
    <div className="flex gap-5">
      <div>menu</div>
      <div><Outlet /></div>
    </div>
  );
}

额外检查 #

确保你的路由结构外层包含/users的路由包裹，否则:id会匹配根路径下的id，而非/users下的：

<Route path="/users">
  <Route path=":id" element={<UserLayout />}>
    <Route
      index
      element={
        isLoading ? (
          ""
        ) : hasPermissionToRoute("/users/:id/") ? (
          <User />
        ) : (
          <AccessForbidden />
        )
      }
    />
    <Route
      path="contracts"
      element={
        isLoading ? (
          ""
        ) : hasPermissionToRoute("/users/:id/contracts") ? (
          "contracts"
        ) : (
          <AccessForbidden />
        )
      }
    />
  </Route>
</Route>

这样修改后，访问/users/id/或/users/id/contracts时，侧边菜单和对应子路由内容就能正常显示了。

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