React+MUI实现登录页无抽屉、其他页面带抽屉路由配置求助

核心思路 #

用嵌套路由拆分路由结构：将登录页设为独立顶级路由，带MUI Drawer的Home作为父路由，所有需要Drawer的页面作为Home的子路由，通过Outlet渲染到Home的主内容区域。

具体实现代码 #

1. App.js 路由配置 #

import { Routes, Route } from 'react-router-dom';
import Login from './Login';
import Home from './Home';
import Users from './Users';
import Dashboard from './Dashboard';
import NotFound from './NotFound';

function App() {
  return (
    <Routes>
      {/* 登录页独立路由，不加载Home（无Drawer） */}
      <Route path="/login" element={<Login />} />
      
      {/* Home作为父路由，包含Drawer框架 */}
      <Route path="/" element={<Home />}>
        {/* 子路由：所有需要Drawer的页面 */}
        <Route path="users" element={<Users />} />
        <Route path="dashboard" element={<Dashboard />} />
        {/* 默认首页，访问根路径时渲染Dashboard */}
        <Route index element={<Dashboard />} />
      </Route>

      {/* 404页面 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

2. Home.jsx 带Drawer的父组件 #

import { Drawer, Box, Typography } from '@mui/material';
import { Outlet } from 'react-router-dom';

function Home() {
  return (
    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
      {/* MUI 侧边Drawer */}
      <Drawer
        variant="permanent"
        sx={{
          width: 240,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: 240,
            boxSizing: 'border-box',
            padding: '16px',
          },
        }}
      >
        {/* Drawer内的导航内容，可自定义 */}
        <Typography variant="h6" gutterBottom>
          系统导航
        </Typography>
        {/* 这里可添加导航链接，比如<Link to="/users">用户管理</Link> */}
      </Drawer>

      {/* 主内容区域：Outlet会自动渲染当前匹配的子路由组件 */}
      <Box component="main" sx={{ flexGrow: 1, padding: '24px', backgroundColor: '#f5f5f5' }}>
        <Outlet />
      </Box>
    </Box>
  );
}

export default Home;

问题原因说明 #

你之前的问题出在路由结构不合理：

• 若把Home和Users设为同级路由，访问/users时会同时匹配两个路由规则，导致重复渲染Home内容；
• 直接移除Home路由的话，/users没有父组件承载，页面空白；
• 单独渲染Users则无法嵌套进Home的Drawer框架。

用嵌套路由后，只有访问非/login的路径才会加载Home（带Drawer），子路由组件通过Outlet插入到Home的主内容区，完美解决上述问题。

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