升级React Router v6后嵌套路由Layout布局遮挡页面、功能失效如何解决？

根因定位 #

存在两个核心问题直接导致当前异常：

1. React Router v6 嵌套路由的父级路由组件不会通过props.children接收子路由元素，必须使用官方提供的<Outlet>组件作为子路由的渲染插槽。你当前Layout组件用children接收子内容，导致子路由页面根本没有渲染到Layout内部，Layout自身占满全部视图空间，自然会出现遮挡问题。
2. 你需求是全局展示固定顶部Header，但当前配置下只有/diary等嵌套路由会渲染Layout内的Header，首页、登录注册页不会展示Header，不符合预期。

排查步骤 #

• 打开浏览器开发者工具元素面板，查看Layout组件对应的DOM节点下是否存在子路由对应的DOM：如果只有Header、SidePanel、空的.main容器，即可确认是<Outlet>缺失问题。
• 查看Header的CSS样式：如果Header设置了position: fixed，你给.main设置的marginTop: 100px如果小于Header的实际高度，也会导致内容被Header遮挡。
• 访问/diary路径时，查看组件树是否同时渲染了Layout和Diary组件，确认嵌套路由配置生效。

修复方案 #

第一步：修改Layout组件，替换children为Outlet #

首先从react-router-dom导入<Outlet>作为子路由的渲染插槽，同时可通过路径判断控制侧边栏是否展示：

import { Outlet, useLocation } from 'react-router-dom'

function Layout() {
  const location = useLocation()
  // 自定义不需要展示侧边栏的路径列表
  const hideSidePanel = ['/about', '/'].includes(location.pathname)

  return (
    <div className="layout">
      <Header />
      {!hideSidePanel && <SidePanel />}
      <div className="main" style={{ 
        marginTop: "100px", 
        // 侧边栏如果是固定定位，需要给内容区加左边距避免遮挡
        marginLeft: hideSidePanel ? 0 : "240px" 
      }}>
        {/* 子路由内容会渲染到Outlet位置 */}
        <Outlet />
      </div>
    </div>
  );
}

export default Layout;

第二步：调整路由配置（可选，适配全局Header需求） #

如果需要所有页面都展示Header，把Layout提到最外层作为公共父路由即可：

function AppRouter() {
  return (
    <Router>
      <Routes>
        {/* 所有路由嵌套在Layout下，全局展示Header */}
        <Route element={<Layout />}>
          <Route path="/" exact element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/sign-up" element={<SignUp />} />
          <Route path="/diary" element={<Diary />} />
          <Route path="/results" element={<Results />} />
          <Route path="/details" element={<Details />} />
          <Route path="/about" element={<About />} />
        </Route>
      </Routes>
    </Router>
  );
}

如果登录注册等页面不需要展示Header，保留你原来的路由结构即可，仅替换Layout内的children为<Outlet>就能解决遮挡问题。

第三步：样式适配 #

确认Header的实际高度不超过.main的marginTop值，侧边栏如果是固定定位，对应调整.main的左边距即可解决重叠问题。

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