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

海滩维尔马

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

我做了一个新组件

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;

在此处输入图像描述但是当我使用这段代码时，它给了我这个错误。如何解决这个错误？

德鲁里斯

NavLink已经有自己的内部状态isActive，没有必要复制它。该className道具应返回字符串类型或未定义。使用childrenprop 函数，而不是尝试在渲染期间将状态更新排入队列。

例子：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。