react-router-dom v6.0.2中NavLink的activeClassName属性失效如何解决

问题原因 #

react-router-dom v6版本正式移除了NavLink组件原有的activeClassName、activeStyle专属属性，这就是v5版本写法升级后失效、控制台抛出警告的根本原因。

解决方法 #

v6中NavLink的className、style属性均支持传入回调函数，该函数会接收一个包含isActive布尔值的对象参数，你可以通过该参数判断当前路由是否激活，动态返回对应的类名/样式即可。

基础写法（无需额外依赖） #

<NavLink
  className={({ isActive }) => 
    `${classes.registerButton} ${isActive ? classes.active : ''}`
  }
  to="/auth/SignUp"
>
  cart
</NavLink>

优化写法（推荐搭配类名拼接工具） #

如果需要拼接的类名较多，推荐使用clsx这类轻量类名拼接工具，避免出现多余空格、逻辑混乱的问题：

1. 先安装依赖：
   npm install clsx
2. 代码改造：

import clsx from 'clsx'

<NavLink
  className={({ isActive }) => 
    clsx(classes.registerButton, isActive && classes.active)
  }
  to="/auth/SignUp"
>
  cart
</NavLink>

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