React Router Outlet未渲染布局：/admin/dashboard路由布局不显示如何修复？

你的问题出在路由配置的层级关系上：当前/admin和/admin/dashboard是同级路由，访问/admin/dashboard时只会单独渲染Dashboard，不会触发Layout组件的渲染，自然也不会显示Outlet里的内容。

步骤1：修改App.js的路由结构，使用嵌套路由 #

把Dashboard配置为Layout的子路由，这样访问/admin/dashboard时会先渲染Layout，再通过Outlet渲染Dashboard：

export default function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          {/* 父路由：渲染Layout，子路由内容通过Layout里的Outlet显示 */}
          <Route path="/admin" element={<Layout />}>
            {/* 子路由：相对路径，对应/admin/dashboard */}
            <Route path="dashboard" element={<Dashboard />} />
            {/* 访问/admin时自动重定向到dashboard */}
            <Route index element={<Navigate to="dashboard" replace />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

步骤2：调整Layout.js的冗余逻辑 #

原来直接写在Layout里的Navigate会导致每次渲染都触发重定向，建议把重定向逻辑移到路由的index路由（如上面App.js的配置），修改后的Layout.js如下：

import { Fragment, Outlet } from 'react';
// 导入你需要的Navbar、Sidebar、Footer组件

export default function Layout() {
  return (
    <Fragment>
      <div className="sb-nav-fixed">
        <Navbar />

        <div id="layoutSidenav">
          <div id="layoutSidenav_nav">
            <Sidebar />
          </div>

          <div id="layoutSidenav_content">
            <main>
              <Outlet /> {/* 子路由内容会在这里渲染 */}
            </main>
            <Footer />
          </div>
        </div>
      </div>
    </Fragment>
  );
}

关键说明 #

• React Router v6中已移除exact属性，路由默认精确匹配，但嵌套路由的父路由会匹配所有以其路径开头的子路由（子路由需用相对路径）。
• 嵌套路由的核心逻辑是父路由渲染布局组件，子路由内容通过Outlet插入布局，以此实现布局复用。

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