材质 UI 抽屉中的按钮导航

Question

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

新页面位于"/new"。我使用来自反应路由器的路由来创建这个。现在，如何以收件箱按钮将我带到抽屉导航器的方式编辑抽屉导航器？我知道如何使用链接而不是按钮进行导航。

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>