React页面刷新后history.listen回调不触发的问题解决

问题原因 #

页面刷新后组件会重新挂载，history.listen是在组件挂载完成后才注册的监听器，此时路由已经完成初始加载，因此这次初始的路由变化不会被监听器捕获，导致回调函数不触发。另外原代码缺少监听器清理逻辑，可能引发内存泄漏。

解决方案1：注册监听器时立即执行一次回调 #

在注册history.listen的同时，手动调用一次回调函数，覆盖页面刷新后的初始路由场景，同时添加清理函数避免内存泄漏：

const history = useHistory();
useEffect(() => {
  const handleRouteChange = () => {
    // 这里编写你的路由变化处理逻辑
    console.log('路由变化:', history.location.pathname);
  };

  // 手动执行一次，处理刷新后的初始路由状态
  handleRouteChange();

  // 注册路由监听器
  const unlisten = history.listen(handleRouteChange);

  // 组件卸载时清理监听器
  return () => unlisten();
}, [history]);

解决方案2：改用React Router v6的useLocation监听（推荐） #

如果你使用React Router v6，useHistory已被useNavigate替代，更推荐用useLocation监听路由变化。useLocation会在路由变化时返回新的location对象，结合useEffect可自动捕获包括刷新在内的所有路由变化：

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

const YourComponent = () => {
  const location = useLocation();

  useEffect(() => {
    // 路由变化（含刷新初始加载）时触发此逻辑
    console.log('当前路由:', location.pathname);
  }, [location]);

  return <div>你的组件内容</div>;
};

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