React导航栏激活状态点击后自动重置问题求助

你的判断完全正确：问题出在原生<a>标签的href属性上。点击<a>标签时，浏览器会触发整页刷新，导致整个React应用重新加载，Navbar组件的state会被重置为初始值"/"，所以你会看到选中样式短暂生效后，立刻恢复成首页激活的状态。

最优解决方案：使用React Router的<Link>组件 #

React Router提供的<Link>组件会在客户端处理路由跳转，不会触发整页刷新，同时可以结合useLocation钩子动态同步当前路由的激活状态，无需手动维护state：

import { Link, useLocation } from 'react-router-dom';

function Navbar(props) {
  // 获取当前路由的路径
  const { pathname } = useLocation();

  return (
    <ul>
      <li>
        <Link
          to="/"
          className={pathname === "/" ? "active" : ""}
        >Solve</Link>
      </li>
      <li>
        <Link
          to="/about"
          className={pathname === "/about" ? "active" : ""}
        >About</Link>
      </li>
    </ul>
  )
}

方案优势：

• <Link>替代原生<a>，通过to属性跳转不会刷新页面，仅更新React Router的路由状态
• 用useLocation获取当前路径，自动同步激活状态，支持直接输入URL、浏览器前进后退等场景

备选方案：阻止原生<a>的默认行为（不推荐） #

如果一定要保留原生<a>标签，需要阻止默认刷新行为，并手动处理路由跳转：

import { useNavigate } from 'react-router-dom';

function Navbar(props) {
  const [clickedNavbarItem, setClickedNavbarItem] = React.useState("/");
  const navigate = useNavigate();

  const handleNavClick = (e, path) => {
    // 阻止浏览器默认刷新行为
    e.preventDefault();
    setClickedNavbarItem(path);
    // 手动触发客户端路由跳转
    navigate(path);
  };

  return (
    <ul>
      <li>
        <a
          onClick={(e) => handleNavClick(e, "/")}
          className={clickedNavbarItem === "/" ? "active" : ""}
          href="/"
        >Solve</a>
      </li>
      <li>
        <a
          onClick={(e) => handleNavClick(e, "/about")}
          className={clickedNavbarItem === "/about" ? "active" : ""}
          href="/about"
        >About</a>
      </li>
    </ul>
  )
}

注意：这种方案需要额外处理路由跳转，且无法自动同步浏览器前进后退的状态，仅作为特殊场景下的备选。

额外检查 #

确保你的根组件已经被BrowserRouter包裹（React Router需要上下文支持）：

import { BrowserRouter } from 'react-router-dom';

function Root() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
}

内容的提问来源于stack exchange，提问作者713sean