TypeScript中NavLink使用activeClassName报属性不存在类型错误

activeClassName属性不存在的报错和TypeScript配置无关，是react-router-dom v6 及以上版本已经正式移除了activeClassName、activeStyle两个属性，对应的TS类型定义中自然没有这两个属性的声明，调用时就会触发类型错误。

方案1：使用v6官方标准写法（推荐） #

v6版本中NavLink的className、style属性都支持传入回调函数，回调会接收包含isActive（布尔值，标识当前路由是否匹配激活）的参数对象，根据该值动态拼接类名即可实现和activeClassName完全一致的效果，修改后的代码如下：

import React from "react";
import { NavLink } from "react-router-dom";

import { Container, Selector } from "./styles";

const DefaultHeader: React.FC = () => {
  return (
    <Container>
      <NavLink
        to="/headers"
        className={({ isActive }) => isActive ? "wasd" : undefined}
      >
        <Selector>Headers</Selector>
      </NavLink>
    </Container>
  );
};

export default DefaultHeader;

如果需要同时配置默认类名和激活类名，可以按如下方式编写：

<NavLink
  to="/headers"
  className={({ isActive }) => `nav-link ${isActive ? "wasd" : ""}`.trim()}
>
  菜单文本
</NavLink>

方案2：降级到v5版本兼容旧写法（不推荐） #

如果是老项目迁移，不想改动现有NavLink相关代码，可以将react-router-dom降级到v5最终稳定版，该版本原生支持activeClassName属性，自带对应TS类型定义，无需额外配置。
执行对应包管理工具的安装命令即可完成降级：

• npm用户：npm install react-router-dom@5.3.4
• yarn用户：yarn add react-router-dom@5.3.4
• pnpm用户：pnpm add react-router-dom@5.3.4

注意：v5和v6版本的路由API差异较大，降级前请确认项目中其他路由相关代码兼容v5版本规范。

内容的提问来源于stack exchange，提问作者João Batista