React NavLink的activeClassName不生效，点击无法切换背景色求解决

问题描述 #

我想实现导航栏点击NavLink时，激活的链接切换背景色。已经给NavLink设置了activeClassName="active3"，并在app.css中定义了该类的黑色背景样式，但功能无法生效。

相关代码如下：

组件代码 #

export class side extends Component {
  render() {
    return (
      <div className="l-navbar " id="nav-bar">
        <nav className="nav">
          <NavLink
            activeClassName="active3"
            className="porpssidebar"
            exact={true}
            to="/"
          >
            <div>
              <a href="#" className="nav_logo">
                <img className="slogo" src={forur} />
                <i className="fas fa-angry"></i>{" "}
              </a>
            </div>
          </NavLink>
          <NavLink activeClassName="active3" exact={true} to="/orders">
            <div>
              {" "}
              <a href="#" className="nav_logo">
                <Orders />
                <i className="fas fa-angry"></i>{" "}
              </a>
            </div>
          </NavLink>
          <NavLink to="/customers" activeClassName="active3">
            <div>
              {" "}
              <a href="#" className="nav_logo">
                <Package />
                <i className="fas fa-angry"></i>{" "}
              </a>
            </div>
          </NavLink>
        </nav>
      </div>
    );
  }
}

export default side;

CSS样式 #

.active3 {
  background: black;
}

解决方法 #

核心问题 #

NavLink内部嵌套了原生<a href="#" />标签，这会干扰React Router对NavLink激活状态的判断，同时原生a标签的默认跳转行为会打乱路由逻辑，导致active3类无法正确添加到激活的NavLink上。

修复步骤 #

1. 移除内部原生a标签：NavLink本身就是用于路由跳转的组件，不需要额外嵌套a标签。
2. 调整样式类的应用位置：将原本a标签上的nav_logo类直接转移到NavLink或内部元素上。
3. 提升激活样式的优先级：如果原有样式（如porpssidebar、nav_logo）的背景样式优先级更高，需要调整.active3的选择器权重，确保激活样式能覆盖原有样式。

修改后的代码示例 #

组件代码

export class side extends Component {
  render() {
    return (
      <div className="l-navbar " id="nav-bar">
        <nav className="nav">
          <NavLink
            activeClassName="active3"
            className="porpssidebar nav_logo"
            exact={true}
            to="/"
          >
            <img className="slogo" src={forur} />
            <i className="fas fa-angry"></i>
          </NavLink>
          <NavLink 
            activeClassName="active3" 
            className="nav_logo"
            exact={true} 
            to="/orders"
          >
            <Orders />
            <i className="fas fa-angry"></i>
          </NavLink>
          <NavLink 
            to="/customers" 
            activeClassName="active3"
            className="nav_logo"
          >
            <Package />
            <i className="fas fa-angry"></i>
          </NavLink>
        </nav>
      </div>
    );
  }
}

export default side;

调整后的CSS样式

/* 提升选择器优先级，确保激活样式生效 */
.nav .active3 {
  background-color: black;
  /* 可选：添加文字颜色对比，方便查看激活状态 */
  color: white;
}

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