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

Question

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

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

Answer 1

您可以通过将 selected 属性设置为 true 来高亮 Drawer 中的当前 ListItem 并使用 pathname 判断item是否匹配当前路由的信息:

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>

现场演示