React无法识别`activeClassName`？react-router-dom的NavLink使用报错求助

问题根因 #

你当前项目安装的是 react-router-dom v6及以上版本，而代码中使用的activeClassName是react-router-dom v5的专属属性，v6版本已经正式移除了该属性，这就是相同代码在其他项目可运行、当前项目不生效的核心原因。

解决方案 #

方案1：适配v6版本语法（推荐）

将NavLink的activeClassName属性替换为函数式的className写法，示例如下：

// 原来的写法
<NavLink activeClassName={s.activeLink} to="/profile"  >Profile</NavLink>

// v6适配写法
<NavLink 
  className={({ isActive }) => isActive ? s.activeLink : ''} 
  to="/profile"  
>
  Profile
</NavLink>

如果需要给NavLink加默认通用类名，可以直接拼接：

className={({ isActive }) => `${s.normalLink} ${isActive ? s.activeLink : ''}`}

方案2：降级到v5版本

如果不想改动现有代码，直接将react-router-dom版本回退到最后一个v5稳定版即可：

npm install react-router-dom@5.3.4
# 用yarn的话执行：yarn add react-router-dom@5.3.4

额外排查项 #

如果修改后仍不生效，可依次检查：

• 项目路由外层是否正确包裹了<BrowserRouter>或<HashRouter>组件
• 路由配置中是否存在对应to属性指向的路径规则
• Navbar.module.css文件中是否确实定义了activeLink类名

内容的提问来源于stack exchange，提问作者Никита Решетняк