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>
      <NavLink
        to="/news"
        style={(isActive) => ({ color: isActive ? "green" : "blue" })}
        className={s.navItems}
      >
        News
      </NavLink>
      <NavLink
        to="/music"
        style={(isActive) => ({ color: isActive ? "green" : "blue" })}
        className={s.navItems}
      >
        Music
      </NavLink>
      <br />
      <NavLink
        to="/settings"
        style={(isActive) => ({ color: isActive ? "green" : "blue" })}
        className={s.navItems}
      >
        Settings
      </NavLink>
    </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-dom v6 中，isActive 是从传递给children、className 和styleNavLink 道具的函数中解构的道具值。

NavLink

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

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

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