除非我刷新，否则 React 侧边栏菜单项不会更新活动状态

Question

我在我的 react 应用程序中将 react-sidebar-pro 用于我的侧边栏组件，我希望当用户单击并重定向到链接时，我的侧边栏菜单项的活动状态变为 true。到目前为止，我所做的是设置一个参数，如果用户位于特定地址，它将变为 true，但它仅在我刷新页面时更新。如何在不刷新页面的情况下更新它，使其看起来响应？我想过使用 useState 来解决这个问题，但我不知道如何将它应用到代码中，因为我还在学习 React

这是我的 Sidebar.js

function Sidebar() {
        //create initial menuCollapse state using useState hook
        const [menuCollapse, setMenuCollapse] = useState(false)

        //create a custom function that will change menucollapse state from false to true and true to false
      const menuIconClick = () => {
        //condition checking to change state from true to false and vice versa
        menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
      }
    return (
        <>
        <div id="header">
            {/* collapsed props to change menu size using menucollapse state */}
          <ProSidebar collapsed={menuCollapse}>
            <SidebarHeader>
            <div className="logotext">
                {/* small and big change using menucollapse state */}
                <p>{menuCollapse ? "LOGO" : "LONG LOGO"}</p>
              </div>
              <div className="closemenu" onClick={menuIconClick}>
                  {/* changing menu collapse icon on click */}
                {menuCollapse ? (
                  <FiArrowRightCircle/>
                ) : (
                  <FiArrowLeftCircle/>
                )}
              </div>
            </SidebarHeader>
            <SidebarContent>
              <Menu iconShape="square">
                <MenuItem active={window.location.pathname === "/"} icon={<FiHome />} >
                  Home
                <Link to="/"/>
                </MenuItem>
                <MenuItem  active={window.location.pathname === "/FAQ"}  icon={<FaList />}>
                  FAQ 
                <Link to="/FAQ"/>
                </MenuItem>
                <MenuItem  active={window.location.pathname === "/Search-sec"} icon={<RiPencilLine />}>SEARCH SEC<Link to="/Search-sec"/></MenuItem>
            </SidebarContent>
            <SidebarFooter>
              <Menu iconShape="square">
                <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
              </Menu>
            </SidebarFooter>
          </ProSidebar>
        </div>
      </>
    )
}

export default Sidebar

Answer 1

这里基本上有两种选择：

1. 将 window.location.path 设为本地状态 请参考Why useEffect doesn't run on window.location.pathname changes?
2. 添加另一个状态（根据点击改变），强制组件重新渲染

function Sidebar() {

  const [menuCollapse, setMenuCollapse] = useState(false);
  const [activeIndex, setActiveIndex] = useState(() => { 
    const initialIndex = 
      window.location.pathname === '/' ? 0 
      : window.location.pathname === '/FAQ' ? 1 
        : window.location. pathname === 'Search-sec' ? 2 
          : 0; 
    return initialIndex; 
  });

  const menuIconClick = () => {
    setMenuCollapse(!menuCollapse);
  };

  return (
    <>
      <div id="header">
        {/* collapsed props to change menu size using menucollapse state */}
        <ProSidebar collapsed={menuCollapse}>
          <SidebarHeader>
            <div className="logotext">
              {/* small and big change using menucollapse state */}
              <p>{menuCollapse ? "LOGO" : "LONG LOGO"}</p>
            </div>
            <div className="closemenu" onClick={menuIconClick}>
              {/* changing menu collapse icon on click */}
              {menuCollapse ? (
                <FiArrowRightCircle />
              ) : (
                <FiArrowLeftCircle />
              )}
            </div>
          </SidebarHeader>
          <SidebarContent>
            <Menu iconShape="square">
              <MenuItem active={activeIndex === 0} icon={<FiHome />} >
                Home
                <Link id="MenuItemHome" to="/" onClick={() => setActiveIndex(0)} />
              </MenuItem>
              <MenuItem  active={activeIndex === 1}  icon={<FaList />} >
                FAQ
                <Link id="MenuItemFAQ" to="/FAQ" onClick={() => setActiveIndex(1)} / >
              </MenuItem>
              <MenuItem  active={activeIndex === 2} icon={<RiPencilLine />}>
                SEARCH SEC
                <Link id="MenuItemSearch" to="/Search-sec" onClick={() => setActiveIndex(2)} />
              </MenuItem>
            </Menu>
          </SidebarContent>
          <SidebarFooter>
            <Menu iconShape="square">
              <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
            </Menu>
          </SidebarFooter>
        </ProSidebar>
      </div>
    </>
  );
}

export default Sidebar;