React Router v6.4.3中createBrowserRouter嵌套子路由渲染失败求助

核心问题分析 #

你的代码存在两个关键问题导致页面无法正常渲染：

1. 父路由组件未使用<Outlet />
   所有包含子路由的父组件（比如Root和Home）必须导入并渲染<Outlet />组件，子路由的元素才会被插入到父组件的对应位置。如果缺少这个组件，子路由的内容没有渲染入口，页面就会出现空白或不显示预期内容的情况。

2. Index路由的子路由路径写法错误
   Index路由本身没有独立的path，它是父路径（这里是/）的默认匹配项。你给index路由的子路由写了绝对路径/home/minis，这会导致路由匹配逻辑混乱。如果你的预期是访问/home/minis时渲染<Minis />，应该把<Home />对应的路由改成独立的path: 'home'，而非使用index路由，同时子路由用相对路径。

修正后的代码示例 #

第一步：调整路由配置 #

修正路由结构和路径写法：

import logo from './logo.svg';
import './App.css';
import './index.css';

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Root from './routes/Root';
import Home from './routes/Home';
import Projects from './routes/Projects';
import ErrorPage from './error/ErrorPage';
import Contact from './routes/Contact';
import Certificates from './routes/Certificates';
import Skills from './routes/Skills';
import Cycling from './routes/HobbyRoutes/Cycling';
import Minis from './routes/HobbyRoutes/Minis';
import Chivalry from './routes/HobbyRoutes/Chivalry';

const router = createBrowserRouter([
    {
        path: '/',
        element: <Root />,
        errorElement: <ErrorPage />,
        children: [
            // 将Home设为独立路由，对应路径/home
            {
                path: 'home',
                element: <Home />,
                children: [
                    // 相对路径，完整路径自动拼接为/home/minis
                    {
                        path: 'minis',
                        element: <Minis />
                    }
                ]
            },
            // 保留index路由作为/路径的默认渲染内容
            {
                index: true,
                element: <Home />
            },
            {
                path: 'projects',
                element: <Projects />,
                errorElement: <ErrorPage />,
                // 若给Projects加子路由，需用相对路径且Projects组件内要有Outlet
                // children: [
                //     { path: 'detail', element: <ProjectDetail /> }
                // ]
            },
            {
                path: 'certificates',
                element: <Certificates />,
            },
            {
                path: 'skills',
                element: <Skills />,
            },
            {
                path: 'contact',
                element: <Contact />,
            },
        ],
    },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

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

修改Root.js，添加子路由渲染入口：

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

function Root() {
  return (
    <div className="root-container">
      {/* 这里可以放置导航栏等公共内容 */}
      <Outlet /> {/* 子路由元素会渲染在此处 */}
    </div>
  );
}

export default Root;

修改Home.js，添加子路由渲染入口：

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

function Home() {
  return (
    <div className="home-container">
      <h1>首页</h1>
      {/* 首页的其他内容 */}
      <Outlet /> {/* Minis组件会渲染在此处 */}
    </div>
  );
}

export default Home;

额外注意事项 #

• 所有包含子路由的父组件，必须确保导入并使用<Outlet />，这是React Router v6中子路由渲染的必要条件。
• 子路由路径优先使用相对路径（不带开头的/），会自动继承父路由路径，避免绝对路径导致的匹配错误。
• 若不需要给某个路由添加子路由，不要额外添加children属性，避免不必要的路由层级。

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