material-ui Drawer listitem 显示活动项目答案

【问题标题】：material-ui Drawer listitem show active itemmaterial-ui Drawer listitem 显示活动项目
【发布时间】：2026-02-02 21:05:02
【问题描述】：

我想在我的抽屉中突出显示所选项目。以下是我的代码

  <Link to ="/#" style={{textDecoration:'none'}}>
  <ListItem button selected={selectedIndex === 0} onClick={(event) => handleListItemClick(event, 0)} >
    <ListItemIcon>
      <HomeIcon  color="secondary"/>
    </ListItemIcon>
    <ListItemText primary="Home" />
  </ListItem>
  </Link>
  <Link to ="/movies" style={{textDecoration:'none'}}>
  <ListItem button selected={selectedIndex === 1} onClick={(event) => handleListItemClick(event, 1)}>
    <ListItemIcon>
      <MovieFilterIcon />
    </ListItemIcon>
    <ListItemText primary="Movies" />
  </ListItem>
  </Link>

以下是我为抽屉调用的函数

  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
  };

我想要的是当我点击电影时它应该转到电影和电影列表项应该显示为活动。 我愿意接受建议

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

当导航到新页面时，您可能面临的问题是 selectedIndex 重置为其默认状态（在您的情况下为 1）。

最简单的解决方法是添加一个 useEffect 函数，以便在客户端挂载时为 selectedIndex 设置正确的值。切换浏览器的 URL 以确定要设置的值：

  useEffect(() => {
    switch (window.location.pathname) {
      case "/":
        setSelectedIndex(0)
        break
      case "/movies":
        setSelectedIndex(1)
        break
      default:
        break
    }
  }, [])

这是一个CodeSandbox，其设置与您的类似，因此您可以查看所有详细信息

【讨论】：