MUI Drawer结合react-router-dom时过渡效果无法激活的问题

问题根源 #

你当前的实现是在每个路由页面（如Home、About）中单独渲染Main组件，导致open状态的变化无法正确触发Main的样式过渡——路由切换时页面组件会重新挂载，Main的样式状态无法连贯更新，同时Drawer和页面内容的布局层级错位，最终引发内容重叠。

修复步骤 #

1. 重构Layout组件，将Main作为路由内容容器 #

修改Drawer.js中的Layout组件，把路由出口（<Outlet>）嵌套在Main组件内部，确保Main始终处于Layout的层级中，跟随Drawer的open状态同步更新：

// Drawer.js
import { Outlet } from 'react-router-dom';
// ...其他导入代码

export default function PersistentDrawerLeft() {
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  return (
    <Box sx={{ display: 'flex' }}>
      {/* 保留原有AppBar、Drawer触发按钮、侧边栏代码 */}
      <AppBar position="fixed" open={open}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: 'none' }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            Persistent drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
          },
        }}
        variant="persistent"
        anchor="left"
        open={open}
      >
        <Toolbar />
        <Box sx={{ overflow: 'auto' }}>
          <List>
            {['Home', 'About'].map((text, index) => (
              <ListItem key={text} disablePadding component={Link} to={index === 0 ? '/' : '/about'}>
                <ListItemButton>
                  <ListItemIcon>
                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                  </ListItemIcon>
                  <ListItemText primary={text} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
        </Box>
      </Drawer>
      {/* 将路由内容放入Main组件内 */}
      <Main open={open}>
        <Toolbar />
        <Outlet />
      </Main>
    </Box>
  );
}

2. 移除路由页面中的Main组件 #

修改Home.js、About.js等页面组件，删除内部的Main渲染逻辑，直接返回页面核心内容：

// Home.js
import Typography from "@mui/material/Typography";

export default function Home() {
  return (
    <Typography paragraph>
      首页内容示例：这是与Drawer结合后的首页，展开侧边栏时内容会自动适配宽度。
    </Typography>
  );
}

// About.js
import Typography from "@mui/material/Typography";

export default function About() {
  return (
    <Typography paragraph>
      关于页面内容：侧边栏展开时，此区域会自动向右偏移，避免与Drawer重叠。
    </Typography>
  );
}

3. 调整路由配置，将Layout设为父路由 #

在App.js中，把Layout组件作为父路由容器，其他页面作为子路由嵌套其中：

// App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import PersistentDrawerLeft from "./Drawer";
import Home from "./Home";
import About from "./About";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<PersistentDrawerLeft />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

修复原理 #

• 让Main组件始终处于Layout的上下文之中，open状态的变化会直接触发Main的样式过渡，不会因路由切换导致组件重新挂载而丢失状态连贯性。
• 统一布局层级，Drawer与Main的相对位置固定，open状态改变时Main的marginLeft会正确调整，彻底解决内容重叠问题。

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