react自定义NavLink 的 active 类名

在 React Router 中，NavLink组件默认会在活动链接上添加 active类名。如果你想自定义这个类名，可以通过以下方式实现：

方法一：使用 activeClassName属性（v5及以下版本）

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

// 使用 activeClassName 指定自定义类名
<NavLink 
  to="/about" 
  activeClassName="my-active-class"
>
  About
</NavLink>

方法二：使用 className回调函数（v6及以上版本）

在 React Router v6 中，activeClassName已被移除，改为使用 className的回调函数形式：

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

// v6 使用 className 回调函数
<NavLink
  to="/about"
  className={({ isActive }) => isActive ? "my-active-class" : ""}
>
  About
</NavLink>

方法三：使用 style回调函数（v6及以上版本）

你也可以直接内联样式：

<NavLink
  to="/about"
  style={({ isActive }) => ({
    color: isActive ? "red" : "blue",
    fontWeight: isActive ? "bold" : "normal"
  })}
>
  About
</NavLink>

方法四：全局自定义 active 类名

如果你想全局修改默认的 active 类名，可以在创建路由器时配置：

import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(routes, {
  future: {
    // 全局配置 active 类名
    v7_normalizeFormMethod: true,
    // 其他配置...
  }
});

注意事项

在 v6 中，exact属性已被移除，匹配规则更加智能

end属性可以用于匹配路径末尾

多个 NavLink 可以同时处于 active 状态，如果它们的路径都匹配当前路由

选择哪种方法取决于你使用的 React Router 版本和你的具体需求。

解决 "绑定元素 'isActive' 隐式具有 'any' 类型" 错误

这个 TypeScript 错误通常在使用 React Router 的 NavLink组件时出现，因为 TypeScript 无法自动推断 isActive参数的类型。以下是几种解决方案：

方法一：显式类型注解

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

<NavLink
  to="/about"
  className={({ isActive }: { isActive: boolean }) => 
    isActive ? "my-active-class" : ""
  }
>
  About
</NavLink>

方法二：定义类型接口

import { NavLink, NavLinkProps } from 'react-router-dom';

interface NavLinkCustomProps {
  isActive: boolean;
}

<NavLink
  to="/about"
  className={({ isActive }: NavLinkCustomProps) => 
    isActive ? "my-active-class" : ""
  }
>
  About
</NavLink>

方法三：使用 React Router 提供的类型

React Router v6 提供了 NavLinkProps类型：

import { NavLink, NavLinkProps } from 'react-router-dom';

<NavLink
  to="/about"
  className={({ isActive }: NavLinkProps['className']) => 
    isActive ? "my-active-class" : ""
  }
>
  About
</NavLink>

方法四：全局类型声明

在项目的类型声明文件中（如 react-router.d.ts）：

import 'react-router-dom';

declare module 'react-router-dom' {
  interface NavLinkProps {
    className?: string | ((props: { isActive: boolean }) => string);
  }
}

方法五：使用类型断言（不推荐）

如果其他方法都不适用，可以使用类型断言：

<NavLink
  to="/about"
  className={({ isActive } : any) => 
    isActive ? "my-active-class" : ""
  }
>
  About
</NavLink>

在 NavLink 的 className 回调中增加多个 CSS 类名

在 React Router 的 NavLink组件中，如果你想在 className回调函数中添加多个 CSS 类名，有几种方法可以实现：

方法一：使用模板字符串

<NavLink
  to="/about"
  className={({ isActive }) => 
    `base-class ${isActive ? "active-class1 active-class2" : ""}`
  }
>
  About
</NavLink>

方法二：使用数组和 join

<NavLink
  to="/about"
  className={({ isActive }) => 
    [
      "base-class",
      ...(isActive ? ["active-class1", "active-class2"] : [])
    ].join(" ")
  }
>
  About
</NavLink>