ReactJS:无法在ReactProSidebar菜单项上设置"Active“类

Question

我正在使用React Pro侧边栏导航(https://github.com/azouaoui-med/react-pro-sidebar)，但我不太确定如何在具有多个链接的菜单中选择的菜单项上设置active属性。

代码：

<SidebarContent>
  <Menu iconShape="square">
    <MenuItem icon={<IoHomeOutline />}>
      Home
      <Link to="/home" />
    </MenuItem>

    <MenuItem icon={<IoPeopleOutline />}>
      HighSev OnCalls
      <Link to="/oncalls" />
    </MenuItem>

    <MenuItem icon={<IoCellularOutline />}>
      Reports
      <Link to="/reports" />
    </MenuItem>
  </Menu>
</SidebarContent>;

提亚

Answer 1

documentation本身已经在MenuItem上定义了prop active

#已更新

检查您的当前路径是否与链接的路径相同，然后将该MenuItem设置为active。其他项目也是如此。

<MenuItem active={window.location.pathname === "/home/"} icon={<IoHomeOutline />}>
  Home
  <Link to="/home" />
</MenuItem>