如何使Material-UI Drawer突出显示当前所在的页面?

问题描述

我目前正在尝试使用

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突出显示当前所在的页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！