在React.js中为选中的标签页添加Active CSS类

看起来你是在用React Router构建步骤导航栏，想要给当前激活的标签页添加active CSS类对吧？没问题，React Router其实提供了专门的组件来处理这种导航高亮需求——NavLink，它是Link的增强版，自带激活状态的判断逻辑。

下面给你两种常用的实现方式：

方式一：直接给NavLink添加Active类 #

把你代码里的Link替换成NavLink，然后通过activeClassName属性指定激活时的类名，这样当路由匹配时，NavLink会自动加上这个类：

<ul>
  <li className="step">
    <NavLink 
      to={`${this.props.match.url}/personal-information`}
      activeClassName="active"
    >
      You <i className="fa fa-long-arrow-right"></i>
    </NavLink>
  </li>
  <li className="step">
    <NavLink 
      to={`${this.props.match.url}/content`}
      activeClassName="active"
    >
      Content <i className="fa fa-long-arrow-right"></i>
    </NavLink>
  </li>
  <li className="step">
    <NavLink 
      to={`${this.props.match.url}/profile-information`}
      activeClassName="active"
    >
      Profile <i className="fa fa-long-arrow-right"></i>
    </NavLink>
  </li>
  <li className="step">
    <NavLink 
      to={`${this.props.match.url}/rewards`}
      activeClassName="active"
    >
      Rewards <i className="fa fa-long-arrow-right"></i>
    </NavLink>
  </li>
  <li className="step">
    <NavLink 
      to={`${this.props.match.url}/goals`}
      activeClassName="active"
    >
      Goals <i className="fa fa-long-arrow-right"></i>
    </NavLink>
  </li>
  <li className="step">
    <NavLink 
      to={`${this.props.match.url}/thanks`}
      activeClassName="active"
    >
      Thanks <i className="fa fa-long-arrow-right"></i>
    </NavLink>
  </li>
  <li className="step">
    <NavLink 
      to={`${this.props.match.url}/payment`}
      activeClassName="active"
    >
      Payment <i className="fa fa-long-arrow-right"></i>
    </NavLink>
  </li>
  <li className="step">
    <NavLink 
      to={`${this.props.match.url}/launch`}
      activeClassName="active"
    >
      Launch!
    </NavLink>
  </li>
</ul>

如果你的项目用的是React Router v6，语法略有变化，activeClassName被整合到className的函数形式里了：

<NavLink
  to={`${this.props.match.url}/personal-information`}
  className={({ isActive }) => `step-link ${isActive ? 'active' : ''}`}
>
  You <i className="fa fa-long-arrow-right"></i>
</NavLink>

方式二：给外层li标签添加Active类 #

如果你希望把active类加到<li>而不是<NavLink>上，可以利用NavLink的状态回调来判断，动态设置li的className：

<ul>
  {/* 方式1：通过路径匹配判断 */}
  <li className={`step ${this.props.location.pathname.includes('personal-information') ? 'active' : ''}`}>
    <Link to={`${this.props.match.url}/personal-information`}>
      You <i className="fa fa-long-arrow-right"></i>
    </Link>
  </li>
  {/* 方式2：用NavLink的isActive回调更精准 */}
  <li>
    <NavLink 
      to={`${this.props.match.url}/content`}
      className={({ isActive }) => `step ${isActive ? 'active' : ''}`}
    >
      Content <i className="fa fa-long-arrow-right"></i>
    </NavLink>
  </li>
  {/* 其他标签页同理修改 */}
</ul>

小提示： #

• 记得从react-router-dom中导入NavLink（v5/v6导入路径一致：import { NavLink } from 'react-router-dom'）
• 如果需要精确匹配路由（比如避免/personal-information和/personal-information/edit同时被激活），v5可以加exact属性，v6则用end属性

这样修改后，当你点击对应的标签页时，匹配的元素就会自动带上active类，你就可以用CSS来设置激活状态的样式啦~

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