React TypeScript项目使用NavLink时activeStyle属性不存在报错如何解决

报错原因 #

你正在使用react-router-dom v6及以上版本，该版本已经正式移除了activeStyle、activeClassName两个属性，类型定义中也删除了对应的字段，所以触发类型报错。

修复方案 #

方案1：使用v6支持的回调属性动态设置样式（推荐）

v6中NavLink的style、className属性都支持传入函数，函数会收到包含isActive字段的参数，可根据激活状态返回对应样式：

• 内联样式写法（替代原activeStyle）：

<NavLink
  to='/'
  style={({ isActive }) => isActive ? {
    textDecoration: 'none',
    color: 'red'
  } : {}}
  className='nav-link'
>
  Top
</NavLink>

• 类名写法（替代原activeClassName）：

<NavLink
  to='/'
  className={({ isActive }) => `nav-link ${isActive ? 'active-class' : ''}`}
>
  Top
</NavLink>

你可以在全局样式中自定义active-class的样式规则即可。

方案2：降级到v5版本

如果项目中存在大量旧版activeStyle/activeClassName用法，改造成本较高，可以直接降级到v5版本：

# 卸载现有版本
npm uninstall react-router-dom @types/react-router-dom
# 安装v5版本
npm install react-router-dom@5 @types/react-router-dom@5

注意降级后需要同步调整其他v6专属的路由API用法，避免兼容问题。

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