React Router中NavLink的active状态不生效但行内样式正常该如何解决

问题原因 #

你使用了CSS Modules编写样式，这类方案会自动给所有类名添加唯一哈希后缀来避免全局命名冲突，你直接给activeClassName传入字符串"active"的情况下，最终渲染到DOM上的类名是未经过哈希处理的纯active，和CSS Modules编译后带哈希后缀的active类名无法匹配，所以样式不会生效。你测试行内样式可以正常生效，是因为行内样式不需要类名匹配，且优先级远高于类选择器，不受这个问题影响。

解决方案 #

• 如果你使用的是React Router v5及更早版本：
  引入样式文件后，从样式对象中取出对应的active类传入属性即可，示例写法：

  // 先引入你的module.css文件
  import styles from './YourComponent.module.css'
  
  // 组件内NavLink的写法
  <NavLink to="/target-path" activeClassName={styles.active}>
    导航项内容
  </NavLink>
  

• 如果你使用的是React Router v6及以上版本：
  v6版本已经正式移除了activeClassName属性，需要通过className的回调函数结合isActive参数手动判断激活状态：

  import styles from './YourComponent.module.css'
  
  <NavLink 
    to="/target-path"
    className={({ isActive }) => isActive ? styles.active : ''}
  >
    导航项内容
  </NavLink>
  

• 如果调整写法后样式仍不生效，检查样式优先级：
  如果你给普通导航项的样式选择器权重高于.active类的权重，激活样式会被覆盖，可以给active类的样式提高优先级，比如添加!important标识，或者调整选择器为更高权重的写法，例如.navItem.active。

内容的提问来源于stack exchange，提问作者Павел Родин