React网站刷新页面时如何弹出确认提示并跳转至首页

问题根因 #

你当前的方案无法生效是两个浏览器的安全限制导致的：

1. 现代浏览器已禁止在onbeforeunload事件回调中执行页面跳转、修改window.location、调用路由跳转方法这类操作，避免网站恶意挟持用户的离开行为
2. 现在大部分浏览器会忽略onbeforeunload回调return的自定义内容，只会显示浏览器统一的离开确认提示，也没有直接的API可以获取用户点击了「确认」还是「取消」

实现方案 #

改用「临时标记 + 初始化判断」的逻辑实现需求：用户确认刷新时先往本地会话存储写入跳转标记，页面重新加载后检测到标记就自动跳转首页，同时清除标记避免后续误触发。

以下是基于react-router v6的完整实现代码：

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

function YourPageComponent() {
  const navigate = useNavigate();

  useEffect(() => {
    // 页面加载时判断是否需要跳转首页
    const redirectFlag = sessionStorage.getItem('refresh_to_home');
    if (redirectFlag) {
      sessionStorage.removeItem('refresh_to_home');
      navigate('/');
    }

    // 弹出刷新/离开确认提示
    const handleBeforeUnload = (e) => {
      e.preventDefault();
      // 兼容各浏览器的提示触发逻辑
      e.returnValue = '';
      return '';
    };

    // 用户确认离开/刷新时写入跳转标记
    const handleUnload = () => {
      sessionStorage.setItem('refresh_to_home', '1');
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    window.addEventListener('unload', handleUnload);

    // 组件卸载时清除事件监听
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      window.removeEventListener('unload', handleUnload);
    };
  }, [navigate]);

  return <div>你的页面内容</div>;
}

注意事项 #

• 如果你使用的是react-router v5，把useNavigate替换成useHistory调用push('/')即可，逻辑完全一致
• 这里用sessionStorage存储标记是因为关闭浏览器后标记会自动清除，不会影响用户下次打开网站的正常访问，如果你需要跨会话生效可以换成localStorage
• 如果需要全站生效这个逻辑，把这段useEffect放在全站共用的Layout根组件里即可，不需要每个页面单独加
• 目前所有主流浏览器都不支持自定义beforeunload的提示文案，只会显示浏览器默认的确认离开提示，这是浏览器的强制限制，无法修改

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