React Router v6.14 NavLink移除className后仍生效的异常求助

问题原因 #

React Router 6.x（含6.14版本）的NavLink组件自带默认行为：当链接处于激活状态时，会自动给元素添加active类名。你之前手动通过className函数实现的类名切换逻辑，和组件默认行为的效果完全一致。移除自定义className属性后，组件的默认激活类逻辑仍在运行，所以激活的链接依然会被加上active类，导致CSS规则持续生效。

解决办法 #

• 完全禁用默认激活类：
  若不需要激活状态样式，除删除CSS规则外，可显式设置className覆盖默认行为：

  <nav>
      <NavLink className={() => ''} to='/host'>Host</NavLink>
      <NavLink className={() => ''} to='/about'>About</NavLink>
      <NavLink className={() => ''} to='/vans'>Vans</NavLink>
  </nav>
  

• 自定义激活类名：
  想保留激活状态但替换默认类名，可在className函数中返回自定义类（此时组件不会再添加默认的active类）：

  <nav>
      <NavLink className={({isActive}) => isActive ? 'custom-active' : ''} to='/host'>Host</NavLink>
      <NavLink className={({isActive}) => isActive ? 'custom-active' : ''} to='/about'>About</NavLink>
      <NavLink className={({isActive}) => isActive ? 'custom-active' : ''} to='/vans'>Vans</NavLink>
  </nav>
  

  同时将CSS中的.active选择器改为.custom-active。

• 直接通过style控制样式：
  绕开类名，用style属性直接定义激活状态样式：

  <nav>
      <NavLink 
          style={({isActive}) => ({
              color: isActive ? '#161616' : '',
              textDecoration: isActive ? 'underline' : ''
          })} 
          to='/host'
      >Host</NavLink>
      <NavLink 
          style={({isActive}) => ({
              color: isActive ? '#161616' : '',
              textDecoration: isActive ? 'underline' : ''
          })} 
          to='/about'
      >About</NavLink>
      <NavLink 
          style={({isActive}) => ({
              color: isActive ? '#161616' : '',
              textDecoration: isActive ? 'underline' : ''
          })} 
          to='/vans'
      >Vans</NavLink>
  </nav>
  

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