Навигация по кнопкам в ящике материалов - PullRequest
Новая
       12

Навигация по кнопкам в ящике материалов

0 голосов
/ 09 февраля 2020

Я использую базовую c реализацию Material UI Box. Я изменил код на их сайте. Они использовали кнопки. Теперь, когда я нажимаю на кнопку, например, «INBOX», я хочу go перейти на новую страницу.

Новая страница находится в «/ new». Я использовал Route from router, чтобы создать это. Теперь, как я могу отредактировать навигатор своего ящика так, чтобы кнопка «Входящие» перенесла меня на него? Я знаю, как делать навигацию по ссылкам, но не по кнопкам. 

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

1 Ответ

1 голос
/ 09 февраля 2020

Если вы хотите, чтобы пользователь перешел на 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>
...