Button Navigation in Material UI Drawer

I am using a basic implementation of Material UI drawer. I modified the code on their website. They have used buttons. Now when I click at a button for example ‘INBOX’, I want to go to a new page.

The new page is at ‘/new’. I used Route from react router to create this. Now, how can I edit my drawer navigator in a way that the inbox button takes me to it? I know how to do navigation with links but not with buttons.

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

If you want the user to be taken to a URL, you need to wrap the ListItem in a Link component. I would have the icon and the url in the array which you map over so that you can set the icon and the link to the URL on the list item. 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>

Advertisement

Answer