如何在TypeScript中使用React Router v6的NavLink并解决回调类型报错

错误原因 #

该类型报错是因为当前环境下NavLink的类型定义无法识别回调函数形式的style/className属性赋值，通常由两个原因导致：

1. 导入组件错误，误用了普通Link组件代替NavLink
2. 本地安装的@types/react-router-dom类型包版本与实际的react-router-dom依赖版本不匹配，类型定义没有同步更新回调传参的支持

解决方案 #

方案1：修正导入路径 #

确保NavLink从官方包导入，不要使用自定义封装的同名组件：

import { NavLink } from 'react-router-dom'

方案2：同步类型包版本 #

将类型包升级到和当前react-router-dom一致的版本即可解决类型报错：

# npm用户执行
npm install @types/react-router-dom@latest -D

# yarn用户执行
yarn add @types/react-router-dom@latest -D

方案3：临时类型断言绕过校验 #

如果暂时不方便升级依赖，可以给回调返回值增加类型声明绕过校验：

// style属性写法
<NavLink
  style={({ isActive }) => ({
    color: isActive ? "green" : "blue",
  }) as React.CSSProperties}
  to="/"
>
  首页
</NavLink>

// className属性写法
<NavLink
  className={({ isActive }) => (isActive ? "active-class" : "normal-class") as string}
  to="/"
>
  首页
</NavLink>

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