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

Question

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

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

Answer 1

您可以通过设置propsListItem来突出显示当前路径，并使用该信息来确定该项目是否与当前路线匹配：Drawerselectedtruepathname

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>

现场演示