javascript - Material UI 抽屉中的按钮导航

Question

我正在使用 Material UI 抽屉的基本实现。我修改了他们网站上的代码。他们使用了按钮。现在，当我单击“收件箱”等按钮时，我想转到新页面。

新页面位于“/new”。我使用 React Router 中的 Route 来创建它。现在，我如何才能通过收件箱按钮将我带到抽屉导航器？我知道如何使用链接进行导航，但不知道如何使用按钮。

export default function PermanentDrawerLeft() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          <Typography variant="h6" noWrap>
            Admin Panel
          </Typography>
          <NotificationsIcon className='panelheaderRight'/>
          <ExitToAppIcon className='panelheaderRight'/>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >
        <div className={classes.toolbar} />
        <Divider />
        <List>
          {['Home','Inbox', 'Rides', 'Users'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{icons[index]}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </Drawer>
    </div>
  );
}

Answer 1

如果您希望将用户带到某个 URL，则需要将 ListItem 包装在 Link 组件中。我会将图标和 url 放在您映射的数组中，以便您可以在列表项上设置图标和指向 URL 的链接。呵呵!

   <List>
      {[{ text: 'Home', url: '/', icon: 'home'},{ text: 'Inbox', url: '/inbox', icon: 'mail'}].map((item, index) => (
          <Link to={item.url}>
            <ListItem button key={item.text}>
              <ListItemIcon>{item.icon}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          </Link>
       ))}
    </List>