“材质UI抽屉中的按钮导航

Question

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

新页面位于'/ 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的链接。 HTH！

   <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>