你如何让 Material-UI Drawer 突出显示它当前所在的页面？

问题描述

我目前正在尝试使用 Material-UI's drawer component 实现一个网站。它有效，当我单击抽屉项目时，它会将我路由到正确的页面。
但是如何让各个抽屉项目突出显示它所在的当前页面。

例如，如果我在 /dashboard 页面上，并且如果 Dashboard 页面的 Drawer Item 应该突出显示（不同的颜色和样式）以指示我当前动态地位于该页面上。
还没有设法在网上找到任何好的解决方案，而且 Material-UI 文档没有演示如何做到这一点，很高兴听到你们都是如何做到的。

解决方法

您可以通过将 ListItem 属性设置为 Drawer 来突出显示 selected 中的当前 true，并使用 pathname 信息来确定该项目是否与当前路线：

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>

现场演示