如何在React应用中检测页面刷新而非React Router路由切换

首先明确：React Router的单页路由切换不会触发window.beforeunload事件，因为页面并没有真正卸载。如果你的代码中这个事件在路由切换时触发了，先排查是否存在以下情况：

• 路由配置中使用了强制页面刷新的逻辑（比如window.location.href跳转）
• 某些操作意外触发了页面重载
• 路由跳转指向了外部域名或非单页路由的页面

如果需要更稳妥的区分方案，可以结合React Router的路由监听来标记路由切换状态，避免误判：

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

function YourComponent() {
  const location = useLocation();
  const [isRouteChanging, setIsRouteChanging] = useState(false);

  // 监听路由变化，标记路由切换状态
  useEffect(() => {
    setIsRouteChanging(true);
    // 路由切换完成后重置标记（短暂延迟确保覆盖切换过程）
    const resetTimer = setTimeout(() => setIsRouteChanging(false), 100);
    return () => clearTimeout(resetTimer);
  }, [location]);

  const handleBeforeUnload = (e) => {
    // 若为路由切换，不执行页面刷新相关逻辑
    if (isRouteChanging) return;
    
    // 页面刷新/关闭时的处理逻辑
    e.preventDefault();
    e.returnValue = ''; // 兼容浏览器默认提示
    return '';
  };

  useEffect(() => {
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [isRouteChanging]);

  return (
    // 你的组件内容
  );
}

说明 #

• 通过useLocation钩子监听路由变化，在路由切换时设置isRouteChanging标记，切换完成后重置。
• 在beforeunload回调中先判断标记，若处于路由切换状态则直接返回，仅在真正的页面刷新/关闭时执行逻辑。
• 浏览器对beforeunload的自定义提示文本支持有限，多数情况下只会显示系统默认提示，无需过度自定义。

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