使用react-router-dom中的＜NavLink＞activeClassName样式不生效

问题

使用react-router-dom中的<NavLink>切换页面时activeClassName样式不生效

原因

本地react-router-dom包已经更新到最新6.0.0-beta.8版本，beta版本不稳定

解决方法1

由于beta版本不稳定，建议回到稳定版本V5.3.0

解决方法2

使用最新版本react-router-domV6.0.0以上，可以通过className和style属性进行修改active状态。

两个属性都是通过箭头函数接收到isActive参数值，最后className接收一个string返回值，style接收一个css样式数据返回值进行修改<NavLink>active状态样式。

className传值是string类型，则会默认给一个"active"

export interface NavLinkProps extends Omit<LinkProps, "className" | "style"> {
  caseSensitive?: boolean;
  className?: string | ((props: { isActive: boolean }) => string);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: { isActive: boolean }) => React.CSSProperties);
}

使用例子：

<NavLink
	to="."
	className={({ isActive }) =>
		"nav-link" + (isActive ? " highlighted" : " plain")
	}
>
 Home
</NavLink>