React中如何按URL匹配特定字符串执行操作？代码需双击才识别URL

原代码的问题 #

你的代码需要双击才生效，核心原因是：

• useEffect的依赖数组只有active，只有当active状态变化时，才会重新执行URL检查和DOM操作逻辑。
• 第一次点击链接时，URL已经变化，但此时active还没更新，useEffect不会触发，直到点击后执行setActive(!active)，active变化后useEffect才会执行，导致需要第二次点击才能让逻辑匹配新的URL。
• 手动操作DOM添加/移除类、绑定点击事件的方式不符合React状态驱动的理念，容易引发页面状态不一致问题。

解决方案 #

方案1：使用React Router（推荐，适用于使用路由库的项目） #

如果你的项目基于react-router-dom开发，可以直接用useLocation钩子监听URL变化，完全用状态控制导航活跃状态：

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

// 导航项示例数据
const navItems = [
  { path: '/home', label: '首页' },
  { path: '/profile', label: '个人中心' },
  { path: '/settings', label: '设置' },
];

function NavBar() {
  const location = useLocation();
  const [activePath, setActivePath] = useState(location.pathname);

  useEffect(() => {
    // URL变化时自动更新活跃路径
    setActivePath(location.pathname);
  }, [location.pathname]);

  const handleLinkClick = (path) => {
    setActivePath(path);
  };

  return (
    <ul>
      {navItems.map(item => (
        <li key={item.path}>
          <a
            href={item.path}
            className={activePath === item.path ? 'NavBar_active__Cvluy' : ''}
            onClick={() => handleLinkClick(item.path)}
          >
            {item.label}
          </a>
        </li>
      ))}
    </ul>
  );
}

方案2：原生监听URL变化（适用于未使用路由库的场景） #

如果没用到路由库，可以监听浏览器的popstate事件处理前进后退，同时在点击链接时立即触发检查逻辑：

import { useEffect, useRef, useState } from 'react';

function NavBar() {
  const ul = useRef(null);
  const [currentPath, setCurrentPath] = useState(() => {
    // 初始化时获取当前路径
    return '/' + window.location.href.split('/')[3];
  });

  // 统一处理导航项活跃状态更新
  const updateActiveNav = () => {
    const path = '/' + window.location.href.split('/')[3];
    setCurrentPath(path);
    
    const aLinks = ul.current.querySelectorAll('li a');
    aLinks.forEach(element => {
      if (element.getAttribute('href') === path) {
        element.classList.add('NavBar_active__Cvluy');
      } else {
        element.classList.remove('NavBar_active__Cvluy');
      }
    });
  };

  useEffect(() => {
    // 初始化时执行一次
    updateActiveNav();
    // 监听浏览器前进后退导致的URL变化
    window.addEventListener('popstate', updateActiveNav);
    
    // 组件卸载时清理事件监听，避免内存泄漏
    return () => {
      window.removeEventListener('popstate', updateActiveNav);
    };
  }, []);

  const handleLinkClick = () => {
    // 点击链接后延迟触发检查，确保URL已更新
    setTimeout(updateActiveNav, 0);
    // 若需要切换active状态，直接在此处处理
    // setActive(prev => !prev);
  };

  return (
    <ul ref={ul}>
      <li><a href="/home" onClick={handleLinkClick}>首页</a></li>
      <li><a href="/profile" onClick={handleLinkClick}>个人中心</a></li>
    </ul>
  );
}

关键优化点 #

• 移除了依赖active的不合理逻辑，改为直接监听URL或路由状态变化，从根源解决双击问题。
• 用React状态控制活跃类名，或确保URL变化时立即触发检查逻辑，保证页面状态一致性。
• 清理了手动绑定的事件监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者آرش زارعی