React-router v.6 中的 isActive 样式

Question

您能帮我理解为什么活跃风格始终处于活跃状态吗？我有“react-router-dom”：“^6.1.1”。我尝试了不同的方法来应用这种风格，就像在反应路由器文档中编写的那样，但我仍然找不到错误，为什么会这样。

import { NavLink } from "react-router-dom";
import s from "../Sidebar/Sidebar.module.css";

function Sidebar() {
  return (
    <div className={s.Sidebar}>
      <NavLink
        to="/profile"
        style={(isActive) => ({ color: isActive ? "green" : "blue" })}
        className={s.navItems}
      >
        Profile
      </NavLink>
      <NavLink
        to="/messages"
        style={(isActive) => ({ color: isActive ? "green" : "blue" })}
        className={s.navItems}
      >
        Messages
      </NavLink>
      <br />
    </div>
  );
}

export default Sidebar;

.navItems{
  display: flex;
  text-decoration: none;
  font-size: 26px;
  padding-bottom: 8px;
}

  [1]: https://i.stack.imgur.com/cCsBw.png

Answer 1

在react-router-domv6中isActive， 是从传递给children、className和style NavLinkprops 的函数解构得到的 prop 值。

导航链接

interface NavLinkProps
  extends Omit<
    LinkProps,
    "className" | "style" | "children"
  > {
  caseSensitive?: boolean;
  children?:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  className?:
    | string
    | ((props: { isActive: boolean }) => string);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: {
        isActive: boolean;
      }) => React.CSSProperties);
}

isActive在style回调中解构， style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}.

<NavLink
  to="/profile"
  style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
  className={s.navItems}
>
  Profile
</NavLink>