React嵌套路由失效求助：子路由跳转后离开含Outlet的页面

问题出在adminPath的判断逻辑上，你当前用pathname === '/admin-dashboard'来判断是否处于管理员路径，只有当路径完全匹配根仪表盘路径时才为true。但访问子路径（比如/admin-dashboard/home-page）时，这个条件不成立，导致：

• Layout组件中props.adminPath为false，侧边栏MiniDrawer不渲染
• MainPage中!adminPath为true，错误显示了普通页面的Header和Footer，破坏了仪表盘布局

修复步骤 #

1. 修改adminPath的判断逻辑，改为检测路径是否以/admin-dashboard开头：

let adminPath = pathname.startsWith('/admin-dashboard');

2. 确保Layout组件接收到正确的adminPath值，这样子路径下侧边栏仍会正常渲染。

修改后的MainPage关键代码片段 #

const MainPage = () => {
  // ... 其他代码保持不变
  const { pathname } = useLocation()

  // 替换原adminPath判断
  let adminPath = pathname.startsWith('/admin-dashboard');

  return (
    <>
      <Box>
        {!adminPath && <Header logged={logCheck} user={user} auth={auth}/>}
        <Routes>
          {/* ... 其他路由保持不变 */}
          <Route path="admin-dashboard" element={logCheck ? <Layout adminPath={adminPath} user={user} auth={auth}/> : <Navigate to='/' />}>
            <Route path="" element={<Dashboard />}/>
            <Route path="home-page" element={<HomePageContents />}/>
          </Route>
        </Routes>
      </Box>
      <Box>
        <BackToTop />
      </Box>
      {!adminPath && <Footer />}
    </>
  );
};

这样修改后，所有以/admin-dashboard开头的路径都会保持仪表盘布局，子页面也会正确嵌入Layout的Outlet中，同时不会显示普通页面的Header和Footer。

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