ReactJS实现浏览器前进/后退/刷新时弹出确认提示的方案咨询

嘿，这个需求我刚好在项目里实现过，给你拆解成两种场景来处理，完全覆盖后退、刷新和前进的情况：

1. 处理浏览器刷新/关闭/系统级后退（比如浏览器后退按钮） #

这种情况属于浏览器的原生行为，我们可以监听 beforeunload 事件来拦截。在你的 /resume 页面组件里添加以下代码：

import { useEffect } from 'react';

function ResumePage() {
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      // 取消默认行为，触发确认提示
      e.preventDefault();
      // 设置自定义提示文本（部分浏览器会强制用自带文案，但我们仍需兼容）
      e.returnValue = '注意！您正在尝试离开页面，继续操作可能会丢失数据，确定要继续吗？';
      // 返回提示文本，适配不同浏览器
      return '注意！您正在尝试离开页面，继续操作可能会丢失数据，确定要继续吗？';
    };

    // 添加事件监听
    window.addEventListener('beforeunload', handleBeforeUnload);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  // 页面内容渲染
  return (
    <div className="resume-container">
      {/* 你的简历页面内容 */}
    </div>
  );
}

export default ResumePage;

这个方法会拦截用户刷新页面、关闭标签页，以及点击浏览器自带的后退/前进按钮的操作。

2. 处理React路由的客户端跳转（比如路由链接、编程式导航） #

因为React单页应用的路由跳转是客户端行为，beforeunload 管不了这类情况，所以我们需要用React Router的路由阻塞功能（以v6版本为例）：

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

function ResumePage() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    // 注册路由阻塞回调
    const unblock = navigate((to) => {
      // 仅当当前在/resume页面时触发拦截
      if (location.pathname === '/resume') {
        const shouldLeave = window.confirm('注意！您正在尝试离开页面，继续操作可能会丢失数据，确定要继续吗？');
        return shouldLeave; // 返回true允许跳转，false阻止跳转
      }
      return true; // 其他页面不拦截
    });

    // 组件卸载时取消阻塞，避免影响其他页面
    return unblock;
  }, [location, navigate]);

  // 页面内容渲染
  return (
    <div className="resume-container">
      {/* 你的简历页面内容 */}
    </div>
  );
}

export default ResumePage;

这个方法会拦截所有通过React Router发起的跳转，包括用户点击路由链接、调用 navigate 方法，以及浏览器前进后退触发的路由切换。

优化建议（可选） #

如果你的/resume页面有表单输入，可以结合表单的“修改状态”来触发提示，避免用户没修改内容时也弹出提示，提升体验：

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

function ResumePage() {
  const [isFormDirty, setIsFormDirty] = useState(false);
  const location = useLocation();
  const navigate = useNavigate();

  // 监听表单输入，标记为已修改
  const handleInputChange = () => {
    setIsFormDirty(true);
  };

  // 处理浏览器原生卸载事件
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      // 只有表单修改过才触发提示
      if (!isFormDirty) return;
      e.preventDefault();
      e.returnValue = '注意！您正在尝试离开页面，继续操作可能会丢失数据，确定要继续吗？';
      return e.returnValue;
    };

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

  // 处理React路由跳转
  useEffect(() => {
    const unblock = navigate((to) => {
      if (location.pathname === '/resume' && isFormDirty) {
        return window.confirm('注意！您正在尝试离开页面，继续操作可能会丢失数据，确定要继续吗？');
      }
      return true;
    });
    return unblock;
  }, [location, navigate, isFormDirty]);

  return (
    <div className="resume-container">
      <input type="text" onChange={handleInputChange} placeholder="编辑简历内容..." />
      {/* 其他表单元素 */}
    </div>
  );
}

export default ResumePage;

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