如何在 react-router-dom v6 的活动 NavLink 中显示不同的图标？

Question

我想在特定导航 link 处于活动状态时显示不同的图标。

我做了一个新组件

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 道具应该 return 字符串类型或未定义。使用 children prop 函数而不是尝试在渲染期间将状态更新加入队列。

示例：

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>
  );
};

如何在 react-router-dom v6 的活动 NavLink 中显示不同的图标？

How to show different icon in active NavLink in react-router-dom v6?

reactjs

react-router-dom