React路由切换时useEffect未触发handleRouteChange问题排查

问题分析 #

在使用react-router-dom@6.14.0时，通过useEffect监听location或location.pathname执行路由切换逻辑（如判断是否为首页）未生效，核心原因通常是闭包捕获旧值或函数引用未正确加入依赖：

• 若handleRouteChange是组件内部的普通函数，每次组件渲染都会生成新的函数实例，当useEffect仅依赖location.pathname时，函数内部可能捕获到旧的location值；
• 若未正确处理函数依赖，React的依赖检测机制可能无法识别到需要重新执行useEffect。

解决方案 #

方案1：直接在useEffect中编写逻辑（推荐） #

去掉单独的handleRouteChange函数，将判断逻辑直接写入useEffect，避免闭包问题：

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

function Navbar() {
  const location = useLocation();
  const [isHome, setIsHome] = useState(false);

  useEffect(() => {
    // 直接判断当前路径是否为首页
    setIsHome(location.pathname === '/');
  }, [location.pathname]); // 仅监听路径变化

  return (
    <nav>
      {isHome ? <span>当前是首页</span> : <span>当前是其他页面</span>}
    </nav>
  );
}

方案2：用useCallback包裹函数并添加依赖 #

如果需要保留handleRouteChange函数，使用useCallback缓存函数引用，并将其加入useEffect的依赖数组：

import { useLocation, useState, useEffect, useCallback } from 'react';

function Navbar() {
  const location = useLocation();
  const [isHome, setIsHome] = useState(false);

  // 用useCallback缓存函数，依赖location.pathname
  const handleRouteChange = useCallback(() => {
    setIsHome(location.pathname === '/');
  }, [location.pathname]);

  useEffect(() => {
    handleRouteChange();
  }, [handleRouteChange]); // 监听函数引用变化

  return (
    <nav>
      {isHome ? <span>当前是首页</span> : <span>当前是其他页面</span>}
    </nav>
  );
}

方案3：监听完整location对象 #

若需要监听包含搜索参数、哈希值在内的完整路由变化，可直接依赖location对象：

useEffect(() => {
  setIsHome(location.pathname === '/');
}, [location]);

注意事项 #

• 确保Navbar组件包裹在BrowserRouter或RouterProvider的上下文范围内，否则useLocation无法获取路由信息；
• 若使用React.memo包裹Navbar，需自定义比较函数避免忽略路由变化：

const MemoizedNavbar = React.memo(Navbar, (prevProps, nextProps) => {
  return prevProps.location.pathname === nextProps.location.pathname;
});

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