如何实现点击侧边栏链接仅在非激活时切换其激活状态？

你的问题出在用单个布尔值active控制两个菜单的激活状态——每次点击只是简单取反状态，完全没考虑当前实际路由路径。这就导致已处于某个页面时，再次点击对应链接会错误切换状态到另一个菜单，而页面本身不会跳转（因为路由没变化）。

正确的做法是根据当前路由自动判断激活状态，而非手动切换布尔值，具体步骤如下：

• 导入React Router的useLocation钩子，获取当前页面的路由路径
• 移除原来的active状态和setSideBar函数，无需手动维护状态
• 每个菜单项的className根据当前路径是否匹配目标路由，决定是否添加active类
• 去掉菜单上的onClick事件，Link组件本身已处理路由跳转逻辑

修改后的完整代码：

import { useLocation } from 'react-router-dom';
// 确保已导入Link、Box等组件及PageRoutes、SideBarLineSvg

const Menu = () => {
  const location = useLocation();

  return (
    <Box className='menuWrapper'>
      <Link to={PageRoutes.CHAPTER_ONE}>
        <Box sx={{ display: 'flex' }}>
          <Box></Box>
          <Box
            className={location.pathname === PageRoutes.CHAPTER_ONE ? 'menuItem active' : 'menuItem'}
          >
            <Box marginLeft='12px'>
              <SideBarLineSvg />
            </Box>
            <span>CHAPTER ONE</span>
            <h3>Control Programme</h3>
          </Box>
        </Box>
      </Link>

      <Link to={PageRoutes.CHAPTER_TWO}>
        <Box sx={{ display: 'flex' }}>
          <Box></Box>
          <Box
            className={location.pathname === PageRoutes.CHAPTER_TWO ? 'menuItem active' : 'menuItem'}
          >
            <Box marginLeft='12px'>
              <SideBarLineSvg />
            </Box>
            <span>CHAPTER TWO</span>
            <h3>National Programme</h3>
          </Box>
        </Box>
      </Link>
    </Box>
  );
};

export default Menu;

关键说明： #

• useLocation()返回当前路由信息，location.pathname是当前页面的路径
• 每个菜单项通过判断location.pathname是否等于自身目标路由PageRoutes.XXX，来决定是否添加active类
• 完全由路由状态驱动激活样式，不管怎么点击链接，激活状态都会和当前页面保持一致，不会出现错误切换

如果你的PageRoutes是相对路径，可根据实际情况调整判断条件，比如使用includes做模糊匹配。

内容的提问来源于stack exchange，提问作者tinaa