reactjs - 如何在react-router-dom v6中的事件NavLink中显示不同的图标？

Question

我想在特定导航链接处于事件状态时显示不同的图标。

我制作了一个新组件

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

const CustomNavLink = ({ to, activeIcon, inActiveIcon }) => {
  const [isActive, setIsActive] = useState(false);
  const changeActive = ({ isActive }) => setIsActive(isActive);
  return (
    <NavLink to={to} className={changeActive}>
      {isActive ? activeIcon : inActiveIcon}
    </NavLink>
  );
};

export default CustomNavLink;

但是当我使用这段代码时，它给了我这个错误。 如何解决这个错误？

Answer 1

NavLink 已经有自己的内部 isActive 状态，无需重复。 className 属性应返回字符串类型或未定义。使用 children 属性函数，而不是在渲染期间尝试将状态更新排入队列。

示例:

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

const CustomNavLink = ({ to, activeIcon, inActiveIcon }) => {
  return (
    <NavLink
      to={to}
      children={({ isActive }) => isActive ? activeIcon : inActiveIcon}
    />
  );
};

export default CustomNavLink;

或

const CustomNavLink = ({ to, activeIcon, inActiveIcon }) => {
  return (
    <NavLink to={to}>
      {({ isActive }) => isActive ? activeIcon : inActiveIcon}
    </NavLink>
  );
};