Reaction-Router v.6中的isActive样式

本文介绍了Reaction-Router v.6中的isActive样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您能帮我理解一下为什么活跃的风格总是活跃的吗？我有&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

解析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样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！