React Router v6 useNavigate 与 MUI Drawer答案

【问题标题】：React Router v6 useNavigate with MUI DrawerReact Router v6 useNavigate 与 MUI Drawer
【发布时间】：2022-01-06 19:55:31
【问题描述】：

我正在使用 stackblitz 尝试在应用程序中使用它之前实现 MUI Drawer 和 react-router-dom。我认为我没有正确使用 useNavigate 挂钩？任何帮助将不胜感激

抽屉.js

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

const itemsList = [
{
  text: 'Home',
  icon: <InboxIcon />,
  onClick: () => navigate('/home'),
},
{
  text: 'About',
  icon: <MailIcon />,
},
{
  text: 'Contact',
  icon: <MailIcon />,
},
];
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;

App.js

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

【问题讨论】：

你能解释一下代码有什么问题吗？什么没有按预期工作？有错误信息吗？
我解决了。该错误是由于在 App.js 中的之外引起的。
是的，可以的。

标签： reactjs react-router material-ui

【解决方案1】：

该错误是由于在 App.js 中将抽屉放在路由器之外引起的。当我复制应该包含在原始帖子中的 useStyles 时，我也犯了一个用户错误。

App.js

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

抽屉.js

const useStyles = makeStyles({
drawer: {
width: '190px',
},
});

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

const itemsList = [
{
  text: 'Home',
  icon: <InboxIcon />,
  onClick: () => navigate('/home'),
},
{
  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;

【讨论】：