reactjs - 在使用 TypeScript 的 React Router 中访问 NavLink 的 isActive

我正在使用 [email 并且有以下 React 组件：

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：类型 '({ isActive }: { isActive: any; }) => string' 不能赋值给类型 'string'。

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

答案＃1

isActive 属性仅适用于 NavLink 组件。在你的代码中，Link 被导入为 NavLink。你需要做的是直接导入 NavLink。

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

答案＃2

你这里有两个问题，应该很容易解决：

1. 正如 @arjun.dev 指出的，你导入了 Link as NavLink，而你应该导入的是 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>
  );
};