React Router v6 useNavigate配合MUI Drawer使用异常问题咨询

• useNavigate 是react-router-dom提供的钩子，必须在组件包裹的上下文范围内才能调用，你当前把组件放在了外面，无法获取路由上下文，所以navigate调用会失效。
• 另外还有两个配置不匹配的问题：
  1. 路由配置中Home页对应路径为/，但Drawer里Home项跳转目标是/home，路径不匹配跳转后会找不到对应页面
  2. About、Contact两个菜单项没有绑定跳转逻辑，点击无响应

1. 调整App.js组件层级 #

将Drawer组件移到内部，保证能拿到路由上下文：

const App = () => {
const classes = useStyles()
return (
<div className={classes.container}>
  <Router>
    <Drawer />
    <Routes>
      <Route path="/" exact element={<Home />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </Router>
</div>
);
};

2. 修正Drawer的跳转配置 #

对齐路径、补全所有菜单项的跳转逻辑：

const Drawer = () => {
const classes = useStyles();
let navigate = useNavigate();

const itemsList = [
{
  text: 'Home',
  icon: <InboxIcon />,
  onClick: () => navigate('/'),
},
{
  text: 'About',
  icon: <MailIcon />,
  onClick: () => navigate('/about'),
},
{
  text: 'Contact',
  icon: <MailIcon />,
  onClick: () => navigate('/contact'),
},
];
return (
<MUIDrawer variant="permanent" className={classes.drawer}>
  <List>
    {itemsList.map((item, index) => {
      const { text, icon, onClick } = item;
      return (
        <ListItem button key={text} onClick={onClick}>
          {icon && <ListItemIcon>{icon}</ListItemIcon>}
          <ListItemText primary={text} />
        </ListItem>
      );
    })}
  </List>
</MUIDrawer>
);
};
export default Drawer;

如果需要给当前激活的菜单项加高亮样式，可以在Drawer中引入useLocation钩子匹配路径：

// Drawer组件内新增
const location = useLocation();

// ListItem组件添加selected属性
<ListItem button key={text} onClick={onClick} selected={location.pathname === item.path}>

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