Material UI抽屉中的按钮导航
Material UI抽屉中的按钮导航
提问于 2020-02-09 18:11:07
我正在使用一个基本的实现材料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>
);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-09 18:39:30
如果希望将用户带到某个网址，则需要将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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60139742
复制相关文章
相似问题
Material-UI导航、抽屉和Flex
主抽屉中的Material UI子抽屉
Material UI + Nextjs:抽屉
Material ui中的剪裁抽屉
Material UI抽屉组件正在隐藏基础导航栏
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
