Material UI Drawer 中的按钮导航答案

【问题标题】：Button Navigation in Material UI DrawerMaterial UI Drawer 中的按钮导航
【发布时间】：2020-05-25 03:24:52
【问题描述】：

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

新页面位于“/new”。我使用来自 react 路由器的 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>
  );
}

【问题讨论】：

标签： javascript reactjs react-router material-ui

【解决方案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>

【讨论】：