Material UI Drawer关闭后点击内部跳转链接自动打开如何解决？

问题根因 #

你遇到的异常是因为客户端路由跳转时，Drawer所属的布局组件没有被卸载，路由变化意外触发了open状态更新，或是导航点击事件的冒泡逻辑错误修改了Drawer的开关状态。你当前写死的const [open, setOpen] = useState(true)只会在组件首次挂载时生效，不会导致路由跳转后自动打开，优先检查逻辑绑定问题即可。

修复步骤 #

• 给Drawer内部所有导航链接添加点击回调，跳转时主动关闭Drawer，示例如下：

// 以React Router为例改造导航点击逻辑
import { useNavigate } from 'react-router-dom';

// 在组件内部
const navigate = useNavigate();
const handleNavClick = (targetPath) => {
  setOpen(false);
  navigate(targetPath);
};

// 渲染导航项时绑定事件
<ListItem onClick={() => handleNavClick('/dashboard')}>
  <ListItemText primary="首页" />
</ListItem>

• 检查是否存在路由监听错误修改open状态的逻辑，删除类似如下的代码：

// 错误逻辑：路由变化就打开Drawer，需移除
useEffect(() => {
  setOpen(true);
}, [location.pathname]);

• 如果需要Drawer状态在页面刷新、跨路由跳转时保持一致，可以把状态持久化到本地存储：

// 初始化时读取本地存储状态，无值则默认开启
const [open, setOpen] = useState(() => {
  const savedStatus = localStorage.getItem('drawer_open_status');
  return savedStatus ? JSON.parse(savedStatus) : true;
});

// 状态变更时同步到本地存储
useEffect(() => {
  localStorage.setItem('drawer_open_status', JSON.stringify(open));
}, [open]);

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