React中如何在用户点击浏览器前进/后退按钮时弹出MessageBox？

首先，先分析你原来代码存在的两个主要问题：

1. 循环触发弹窗：当用户取消弹窗后，你调用window.history.pushState会导致历史记录新增一条，甚至可能再次触发popstate事件，陷入循环弹窗的困境。
2. 内存泄漏风险：直接给window绑定onpopstate事件，如果组件卸载时没有移除监听，会造成内存泄漏。

下面分两种场景给出解决方案：

场景一：未使用React Router的原生处理方式 #

我们可以利用React的useEffect来管理事件监听的生命周期，同时通过标志位避免循环触发：

import { useEffect, useRef } from 'react';
import MessageBox from './MessageBox'; // 替换为你的MessageBox组件路径

function YourComponent() {
  // 用useRef保存标志位，避免组件重渲染时重置，且修改不会触发重渲染
  const isManualHistoryChange = useRef(false);

  useEffect(() => {
    const handlePopState = (e) => {
      // 如果是我们手动触发的历史记录变更，直接跳过弹窗逻辑
      if (isManualHistoryChange.current) {
        isManualHistoryChange.current = false;
        return;
      }

      MessageBox.showConfirmMessage('You clicked back or forward button. Go and lose changes?')
        .then(result => {
          if (!result.confirm) {
            // 手动恢复历史状态，设置标志位避免再次触发popstate
            isManualHistoryChange.current = true;
            // 使用replaceState而不是pushState，避免新增历史条目导致记录混乱
            window.history.replaceState(null, null, window.location.pathname);
          }
          // 用户确认的话，无需额外操作，页面会正常跳转
        });
    };

    // 添加popstate事件监听
    window.addEventListener('popstate', handlePopState);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

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

export default YourComponent;

关键说明： #

• useRef的标志位用来区分是用户触发的浏览器前进后退，还是我们手动修改历史记录导致的事件，避免循环弹窗。
• 使用history.replaceState代替pushState，这样不会新增历史条目，保证历史记录的整洁。
• 通过useEffect的清理函数移除事件监听，避免组件卸载后仍存在监听导致内存泄漏。

场景二：使用React Router（v6.4+） #

如果你项目中使用了React Router，官方提供了usePrompt和useBlocker钩子，能更优雅地处理这种场景，无需手动操作popstate：

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

function YourComponent() {
  // 假设hasUnsavedChanges是你的状态，用来判断用户是否有未保存的修改
  const hasUnsavedChanges = true;

  // 当hasUnsavedChanges为true时，触发路由跳转前的确认弹窗
  usePrompt({
    message: 'You clicked back or forward button. Go and lose changes?',
    when: hasUnsavedChanges,
  });

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

关键说明： #

• usePrompt会自动监听路由变化（包括浏览器前进后退），当when条件满足时弹出确认框。
• 用户取消弹窗时，React Router会自动阻止路由跳转，无需手动处理历史记录，避免了原生方式的各种坑。

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