React Router Dom v5中NavLink的isActive参数TypeScript错误排查

错误原因分析 #

1. 类型不匹配错误：react-router-dom 5的NavLink组件style属性仅接受静态的React.CSSProperties对象，不支持传入返回样式对象的函数。你传入的函数类型与style要求的类型完全不兼容，因此触发类型错误。
2. 隐式any类型错误：函数参数isActive未指定类型，TypeScript默认推断为any，但这只是次要问题——核心问题是style属性不支持函数形式，即使标注any也无法解决根本的类型不匹配。

正确解决方案 #

根据react-router-dom 5的API设计，有两种方式实现激活状态的样式定制：

方案1：使用style+activeStyle属性（推荐，适合简单样式）

利用style设置默认样式，activeStyle专门设置路由激活时的样式：

<NavLink
  to="/categorias"
  style={{ color: '#000' }}
  activeStyle={{ fontWeight: "bold" }}
>
  Page1
</NavLink>

方案2：使用className函数（适合复杂样式逻辑）

如果需要更灵活的样式控制，可以给className传入函数，函数参数会接收isActive状态：

// 先定义CSS类
.active-link {
  color: #000;
  font-weight: bold;
}
.default-link {
  color: #000;
}

// 组件中使用
<NavLink
  to="/categorias"
  className={({ isActive }: { isActive: boolean }) => 
    isActive ? 'active-link' : 'default-link'
  }
>
  Page1
</NavLink>

补充说明 #

从你提供的NavLinkProps定义也能看出：组件提供了activeStyle属性用于设置激活样式，而isActive是一个可选的自定义判断函数（用于覆盖默认的激活判断逻辑），并非用于样式回调的参数。

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