React嵌套子路由失效：Content组件不显示且无报错求助

核心原因 #

父路由的 <Home> 组件中没有渲染 <Outlet> 组件。React Router 的嵌套子路由需要父组件通过 <Outlet> 指定子路由内容的挂载位置，缺少这个组件的话，子路由元素没有渲染容器，自然不会显示，且不会抛出错误。

解决步骤 #

1. 导入Outlet组件：从 react-router-dom 中引入 Outlet
2. 添加渲染容器：在父路由的元素中嵌入 <Outlet>，子路由的内容会自动渲染到这个位置
3. 优化子路由路径：子路由的 path 可简化为 ""，表示父路径下的默认子路由（和写 "/" 效果一致，更符合嵌套路由写法规范）

修改后的完整代码 #

import { createBrowserRouter, Outlet } from "react-router-dom";
import Content from "../../Public/pages/Content/Content";
import { Home } from "@mui/icons-material";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <>
        <Home />
        {/* 子路由内容将渲染到此处 */}
        <Outlet />
      </>
    ),
    children: [
      {
        path: "",
        element: <Content />
      }
    ]
  },
]);

export default router;

如果需要复用布局，也可以封装成独立的布局组件：

import { createBrowserRouter, Outlet } from "react-router-dom";
import Content from "../../Public/pages/Content/Content";
import { Home } from "@mui/icons-material";

const HomeLayout = () => {
  return (
    <>
      <Home />
      <Outlet />
    </>
  );
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomeLayout />,
    children: [
      {
        path: "",
        element: <Content />
      }
    ]
  },
]);

export default router;

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