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

Question

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

代码:

<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>;

TIA

Answer 1

在文档中定义了active上的MenuItem

#更新

检查当前路径是否与link的路径相同，然后将MenuItem设置为active。其他项目也一样。

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