React NavLink isActive函数报类型不匹配错误如何解决

不需要提前定义isActive，这个参数是路由库内部自动传入回调函数的，你遇到的类型错误核心原因是react-router-dom版本和写法不匹配。

• 你当前用的函数式className写法，是react-router-dom v6及以上版本NavLink的标准用法：v6版本中NavLink的className属性支持传入回调函数，路由匹配时会自动把包含isActive（布尔值，标记当前链接是否激活）的对象传给这个回调，回调返回的字符串就是最终应用的类名。
• 如果你项目里安装的是v5及更早版本的react-router-dom，NavLink的className属性只支持传入字符串类型的固定类名，不支持传函数，TypeScript检测到类型不匹配就会抛出你看到的报错。

修复方式 #

先执行npm list react-router-dom确认本地安装的版本，再对应调整写法：

• 若版本为v6+
  检查NavLink的导入路径，确保是从react-router-dom直接导入，没有被自定义的同名组件覆盖。导入正确的情况下，你原来写的代码不需要额外修改就能正常生效：

  <NavLink to="contact" className={({ isActive }) => (isActive ? 'nav-links-active' : 'nav-links')}>
        Contact
  </NavLink>
  

• 若版本为v5及以下
  v5版本要单独通过activeClassName属性指定激活状态的类名，写法如下：

  <NavLink to="contact" className="nav-links" activeClassName="nav-links-active">
        Contact
  </NavLink>
  

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