React Router v6路由与Outlet困惑：三部分页面嵌套单一路由

问题出在路由结构和组件嵌套方式上，你需要用嵌套路由+布局组件来实现预期的DOM结构，让可变内容嵌入到侧边导航的容器内。

1. 创建布局组件 AdminLayout #

这个组件负责复用顶部导航、侧边导航，并通过Outlet承载可变的中心内容，完全匹配你要的DOM结构：

import { Outlet } from 'react-router-dom';
import AdminNavigation from './AdminNavigation';
import AdminNavigationLeft from './AdminNavigationLeft';

const AdminLayout = () => {
  return (
    <>
      {/* 顶部导航，全局复用 */}
      <AdminNavigation />
      {/* 侧边导航容器，包裹侧边栏和中心内容 */}
      <div id="layoutSideNav">
        <div id="layoutsidenav_nav">
          <AdminNavigationLeft />
        </div>
        {/* 中心内容容器，Outlet会渲染子路由的组件 */}
        <div id="layoutSidenav_content">
          <Outlet />
        </div>
      </div>
    </>
  );
};

export default AdminLayout;

2. 修改路由配置为嵌套结构 #

将布局组件作为父路由的element，把可变内容组件作为子路由配置，这样中心内容会自动渲染到Outlet的位置：

import { Routes, Route } from 'react-router-dom';
import AdminLayout from './AdminLayout';
import AdminDashBoardHome from './AdminDashBoardHome';

function App() {
  return (
    <Routes>
      {/* 父路由：加载布局组件 */}
      <Route path="/admin-dashboard" element={<AdminLayout />}>
        {/* 默认子路由：访问/admin-dashboard时渲染首页内容 */}
        <Route index element={<AdminDashBoardHome />} />
        {/* 可扩展其他子路由，比如设置页 */}
        {/* <Route path="settings" element={<AdminSettings />} /> */}
      </Route>
    </Routes>
  );
}

export default App;

为什么之前的写法不行？ #

你之前直接把三个组件平级渲染，AdminNavigationLeft里的layoutSideNav只包裹了侧边导航，中心内容组件AdminDashBoardHome是独立在外面的，自然会出现DOM结构错位。

现在通过嵌套路由，Outlet作为父路由布局的“占位符”，子路由的内容会精准插入到layoutSidenav_content容器内，完全符合你期望的结构。

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