Reaction-Router v.6中的isActive样式 [英] isActive style in react-router v.6

问题描述

您能帮我理解一下为什么活跃的风格总是活跃的吗？我有&reaction-route-dom"；：^6.1.1"；。我尝试了不同的方法来应用此样式，就像Reaction路由器文档中所写的那样，但我仍然找不到错误的原因。

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

推荐答案

在react-router-domv6中，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);
}

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

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

这篇关于Reaction-Router v.6中的isActive样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！