使用TypeScript访问React Router中NavLink上的isActive

Question

我使用react-router-dom@6.42，并具有以下反应组件：

import { Link as NavLink } from "react-router-dom";
interface SidebarNavItemProps {
name: string;
path: string;
icon: JSX.Element;
}
const SidebarNavItem = (props: SidebarNavItemProps) => {
const navLinkCssClasses = ({isActive }): string => {
return `flex group-hover:text-primary-700 group-hover:bg-primary-50 text-gray-700 font-semibold text-base px-3 py-2 rounded-md ${
isActive ? "text-primary-700 bg-primary-50" : ""
}`;
};
return (
<li className="group mb-1">
<NavLink className={navLinkCssClasses} to={props.path}>
{props.icon}
{props.name}
</NavLink>
</li>
);
};
export default SidebarNavItem;

我正在使用TypeScript，编译器不满意。我有两个错误：

TS7031:绑定元素"isActive"隐式具有"any"类型。

TS2322:Type'(｛isActive｝：｛isActive:any；｝(=>string"不可分配给类型"string"。

我尝试将className={navLinkCssClasses}更改为className={navLinkCssClasses({isActive})}，但仍然没有帮助。我错过了什么？

Answer 1

isActive道具仅适用于NavLink组件。在您的代码中，Link被导入为NavLink。您要做的是导入NavLink本身。

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

Answer 2

这里有两个问题，应该很容易修复：

1. 正如@arjun.dev所指出的，您已经在本应导入NavLink的地方导入了Link as NavLink——React Router的Link组件不具有className的功能，而NavLink具有
2. 由于navLinkCssClasses是一个函数，因此必须正确键入其参数(isActive(

// this is important
import { NavLink } from "react-router-dom";
/* ... */
const SidebarNavItem = (props: SidebarNavItemProps) => {
// make sure to type the parameters of this function! isActive is a boolean 
const navLinkCssClasses = ({ isActive }: { isActive: boolean }): string => {
return `flex group-hover:text-primary-700 group-hover:bg-primary-50 text-gray-700 font-semibold text-base px-3 py-2 rounded-md ${
isActive ? "text-primary-700 bg-primary-50" : ""
}`;
};
return (
<li className="group mb-1">
<NavLink className={navLinkCssClasses} to={props.path}>
{props.icon}
{props.name}
</NavLink>
</li>
);
};