使用react-scroll库时，‘About’和‘Skill’按钮点击后激活样式不生效

问题分析 #

你遇到的activeClass="active"在点击About和Skill时不生效，主要是代码结构和样式优先级的问题，以下是具体修复步骤：

1. 移除嵌套的<a>标签 #

react-scroll的<Link>组件本身会渲染为可点击的锚点元素，不需要手动嵌套<a>标签。嵌套后activeClass会被添加到外层<Link>元素，但内层<a>的样式会覆盖或导致激活状态无法正常显示。

修改后的Menu组件代码：

const Menu = () => {
  return (
    <div>
      <nav className="nav">
        <ul className="ul">
          {navLinks.map((link) => (
            <li key={link.id}>
              <Link
                to={link.text}
                activeClass="active"
                spy={true}
                smooth={true}
                duration={500}
                className="item"
              >
                {link.text}
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

2. 提升激活样式的优先级 #

如果.item类的样式优先级高于.active，即使添加了激活类也无法看到效果。修改样式为组合选择器，确保激活样式能覆盖基础样式：

.item.active {
  background-color: #05bd0b;
}

3. 检查ID与to属性的匹配度 #

确认页面组件的id值和<Link>的to属性完全一致（包括大小写）：

• 导航中to="About"对应页面元素id="About"
• 导航中to="Skill"对应页面元素id="Skill"

4. 验证spy配置 #

确保<Link>的spy={true}属性已正确设置，该属性用于监听滚动位置并自动添加激活类。

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