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

【问题标题】：How do you get Material-UI Drawer to highlight the page it is currently at?你如何让 Material-UI Drawer 突出显示它当前所在的页面？
【发布时间】：2021-07-05 16:20:01
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-router material-ui material-design react-router-v4

【解决方案1】：

您可以通过将selected 属性设置为true 来突出显示Drawer 中的当前ListItem，并使用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>

现场演示

【讨论】：