React-Router导航active类异常：已声明路由需两次点击问题咨询

问题原因 #

核心问题是手动维护的active状态与路由状态不同步：

• 当切换到已配置对应页面的路由（如/、/profile）时，路由跳转触发了页面组件的挂载/重新渲染，如果你是用useState手动维护active索引（初始值设为0），组件重新渲染会把active状态重置回初始值，导致第一次点击的状态更新被覆盖，必须第二次点击才能让状态和当前路由匹配。
• 而切换未配置对应页面的路由时，不会触发页面组件的挂载/重新渲染，组件状态不会被重置，所以active类的分配表现正常。

修复方案 #

方案1：使用React-Router自带的NavLink组件（推荐） #

NavLink内置了路由激活状态的判断逻辑，无需手动维护active状态：

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

function Nav() {
  return (
    <nav>
      <NavLink 
        to="/" 
        className={({ isActive }) => isActive ? 'active' : ''}
        end // 精确匹配根路由，避免子路由也激活根导航项
      >
        首页
      </NavLink>
      <NavLink 
        to="/profile" 
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        个人中心
      </NavLink>
      <NavLink 
        to="/discipline" 
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        纪律
      </NavLink>
      {/* 其他导航项 */}
    </nav>
  );
}

方案2：通过useLocation同步路由与active状态 #

如果需要手动控制状态逻辑，用useLocation监听路由变化，同步更新active状态：

import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

function Nav() {
  const [activeIndex, setActiveIndex] = useState(0);
  const location = useLocation();
  const navigate = useNavigate();
  
  const navItems = [
    { path: '/', label: '首页' },
    { path: '/profile', label: '个人中心' },
    { path: '/discipline', label: '纪律' },
    // 其他导航项
  ];

  // 监听路由变化，自动同步active索引
  useEffect(() => {
    const matchIndex = navItems.findIndex(item => item.path === location.pathname);
    if (matchIndex !== -1) {
      setActiveIndex(matchIndex);
    }
  }, [location.pathname, navItems]);

  const handleNavClick = (index, path) => {
    setActiveIndex(index);
    navigate(path);
  };

  return (
    <nav>
      {navItems.map((item, index) => (
        <button
          key={item.path}
          onClick={() => handleNavClick(index, item.path)}
          className={index === activeIndex ? 'active' : ''}
        >
          {item.label}
        </button>
      ))}
    </nav>
  );
}

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