反射路由器v6 usenavigate用MUI抽屉

Question

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.j中的路由器外面的抽屉引起的。当我复制原始帖子中应包含的usestyles时，我也犯了一个用户错误。

app.js

Answer 1

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>
  );
};

drawer.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;