问题描述
我目前正在尝试使用
I'm currently trying to implement a website using Material-UI's drawer component. It works, when I click on the Drawer Items, it routes me to the correct pages.
But how do I get the individual Drawer Items to highlight the current page it is on.
For instance, if I am on /dashboard page, and if the Drawer Item for Dashboard page should be highlighted (different color and styles) to indicate that I am currently on that page dynamically.
Haven't manage to find any good solutions online and the Material-UI docs doesn't have a demo of how this is possible, great to hear how you all do it.
You can highlight the current ListItem
in the Drawer
by setting selected
props to true
and use the pathname
information to determine if the item matches the current route:
const routes = {
Home: "/",
About: "/about",
Users: "/users"
};
const { pathname } = useLocation();
<List>
{Object.keys(routes).map((routeName, index) => {
const route = routes[routeName];
return (
<ListItem selected={route === pathname} button key={route}>
<ListItemText primary={routeName} />
</ListItem>
);
})}
</List>
Live Demo
这篇关于你如何让 Material-UI Drawer 突出显示它当前所在的页面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!