如何在Dashboard外独立设置登录页面？React路由布局问题求助

我创建了一个包含路由的Layout组件，但无法将Login页面与Dashboard的布局（侧边栏、顶部导航）分离开。

当前代码 #

路由组件（AppRouter） #

function AppRouter() {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/dashboard" />} />
      <Route path="/login" element={<Login />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/bookings" element={<Bookings />} />
      <Route path="/sell-car" element={<SellCar />} />
      <Route path="/settings" element={<Settings />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default AppRouter;

布局组件（Layout） #

const Layout = () => {
  return (
    <div className="layout">
      <Sidebar />
      <div className="main__layout">
        <TopNav />
        <div className="content">
          <AppRouter />
        </div>
      </div>
    </div>
  );
};

export default Layout;

解决方案 #

问题核心是Layout直接包裹了所有路由，导致登录页也会强制渲染侧边栏和顶部导航。正确的做法是将需要布局的页面路由嵌套在Layout下，登录页作为独立路由单独配置。

步骤1：调整路由结构 #

修改AppRouter，把需要Layout的页面设为嵌套路由：

function AppRouter() {
  return (
    <Routes>
      {/* 独立路由：不需要Layout的页面 */}
      <Route path="/" element={<Navigate to="/dashboard" />} />
      <Route path="/login" element={<Login />} />
      <Route path="*" element={<NotFound />} />

      {/* 嵌套路由：需要Layout的页面 */}
      <Route element={<Layout />}>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/bookings" element={<Bookings />} />
        <Route path="/sell-car" element={<SellCar />} />
        <Route path="/settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

export default AppRouter;

步骤2：修改Layout组件 #

用React Router提供的<Outlet />替换原来的<AppRouter />，用于渲染嵌套路由的内容：

import { Outlet } from 'react-router-dom'; // 记得导入Outlet

const Layout = () => {
  return (
    <div className="layout">
      <Sidebar />
      <div className="main__layout">
        <TopNav />
        <div className="content">
          <Outlet /> {/* 此处渲染嵌套的路由页面 */}
        </div>
      </div>
    </div>
  );
};

export default Layout;

调整后效果：

• 访问/login时，仅渲染Login组件，不会显示Layout的侧边栏和顶部导航
• 访问/dashboard、/bookings等页面时，先渲染Layout框架，再在<Outlet />位置加载对应的页面组件

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