React导航栏中如何为激活的导航项添加白色边框样式？

问题分析 #

你之前尝试的两种方法存在明显局限：

• :active CSS伪类仅作用于元素被点击的瞬间，无法保持路由切换后的持久激活状态。
• 直接使用window.location.pathname判断路径时，组件只会在挂载时计算一次ID，路由切换时不会触发组件重渲染，导致ID无法更新，样式自然不生效。

推荐解决方案：使用React Router的NavLink组件 #

react-router-dom提供的NavLink是Link的增强版，它会自动为当前匹配路由的链接添加激活状态标识，无需手动判断路径，是处理导航激活状态的最优方案。

步骤1：修改Navbar组件代码

替换Link为NavLink，并利用其内置的isActive状态控制激活样式：

import React, { useState } from "react";
import { NavLink, useLocation } from "react-router-dom";
import "./Navbar.css";
import { navItems } from "./NavItems";
import Dropdown from "./Dropdown";
    
function Navbar() {
  const [dropdown, setDropdown] = useState(false);
  // 可选：如需手动判断路径，可通过useLocation获取当前路由
  const location = useLocation();

  return (
    <>
      <nav className="navbar">
        <ul className="nav-items">
          {navItems.map((item) => {
            if (item.id === "C3") {
              return (
                <li
                  key={item.id}
                  className={item.cName}
                  onMouseEnter={() => setDropdown(true)}
                  onMouseLeave={() => setDropdown(false)}
                >
                  {/* 注意：之前的to={item.title}应为item.path，否则会导致路由跳转错误 */}
                  <NavLink 
                    to={item.path}
                    // 根据isActive状态动态添加类名
                    className={({ isActive }) => isActive ? "active-link" : ""}
                  >
                    {item.title}
                  </NavLink>
                  {dropdown && <Dropdown />}
                </li>
              );
            }
            return (
              <li key={item.id} className={item.cName}>
                <NavLink 
                  to={item.path}
                  className={({ isActive }) => isActive ? "active-link" : ""}
                >
                  {item.title}
                </NavLink>
              </li>
            );
          })}
        </ul>
      </nav>
    </>
  );
}

export default Navbar;

步骤2：修改CSS样式

为激活状态的类添加白色边框样式：

.nav-item a:hover {
    border: solid 2px white;
}

/* 激活状态样式 */
.active-link {
    border: solid 2px white;
}

备选方案：手动监听路由变化（若不想使用NavLink） #

如果坚持手动判断路径，需要使用useLocation钩子监听路由变化，确保路由切换时组件重新计算激活状态：

import React, { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import "./Navbar.css";
import { navItems } from "./NavItems";
import Dropdown from "./Dropdown";
    
function Navbar() {
  const [dropdown, setDropdown] = useState(false);
  const location = useLocation();

  return (
    <>
      <nav className="navbar">
        <ul className="nav-items">
          {navItems.map((item) => {
            const isActive = location.pathname === item.path;
            if (item.id === "C3") {
              return (
                <li
                  key={item.id}
                  className={`${item.cName} ${isActive ? "active-item" : ""}`}
                  onMouseEnter={() => setDropdown(true)}
                  onMouseLeave={() => setDropdown(false)}
                >
                  <Link to={item.path}>{item.title}</Link>
                  {dropdown && <Dropdown />}
                </li>
              );
            }
            return (
              <li 
                key={item.id} 
                className={`${item.cName} ${isActive ? "active-item" : ""}`}
              >
                <Link to={item.path}>{item.title}</Link>
              </li>
            );
          })}
        </ul>
      </nav>
    </>
  );
}

export default Navbar;

对应的CSS：

.nav-item a:hover {
    border: solid 2px white;
}

.active-item a {
    border: solid 2px white;
}

内容的提问来源于stack exchange，提问作者Maram Althobity