react-router-dom的NavLink组件如何设置多个activeClassName激活类？

问题根因 #

你之前的activeClassName赋值写法用了JavaScript逗号运算符，逗号表达式会返回最后一个操作数的计算结果，所以只有hasActiveIcon && 'activeIcon'的结果被传入属性，自然只有第二个激活类生效。

修复方案 #

适用于react-router-dom v5版本（当前你使用的版本） #

直接把需要的多个激活类用空格拼接成完整字符串传入activeClassName即可，同时可以直接用NavLink内置的isActive状态切换图标，不需要手动读取DOM类名判断：

const TileNav = ({ to, hasActiveClass, exact, img, activeImg, hasActiveIcon }) => {
  return (
    <NavLink
      to={to}
      // 拼接多个激活类，trim避免多余空格
      activeClassName={`${hasActiveClass ? 'active' : ''} ${hasActiveIcon ? 'iconActive' : ''}`.trim()}
      className="tile-nav__link"
      exact={exact}
    >
      {/* NavLink支持children为函数，直接传入isActive激活状态 */}
      {({ isActive }) => (
        <div className="tile-nav">
          <img className="tile-nav__img" src={isActive ? activeImg : img} alt="Menu icon" />
        </div>
      )}
    </NavLink>
  )
};

补充：react-router-dom v6版本写法 #

v6版本已经移除了activeClassName属性，需要通过className的函数回调自己处理激活类：

const TileNav = ({ to, hasActiveClass, exact, img, activeImg, hasActiveIcon }) => {
  return (
    <NavLink
      to={to}
      end={exact} // v6用end属性替代原exact属性
      className={({ isActive }) => {
        const classList = ['tile-nav__link']
        if (isActive) {
          hasActiveClass && classList.push('active')
          hasActiveIcon && classList.push('iconActive')
        }
        return classList.join(' ')
      }}
    >
      {({ isActive }) => (
        <div className="tile-nav">
          <img className="tile-nav__img" src={isActive ? activeImg : img} alt="Menu icon" />
        </div>
      )}
    </NavLink>
  )
};

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