React-router-dom@5.2.0 Prompt组件问题：页面内嵌iframe在取消导航时触发卸载/加载导致状态丢失

哈哈，这个坑我之前踩过！你遇到的问题本质是React Router v5的Prompt组件在处理导航拦截时，浏览器的默认行为会“误伤”页面里的iframe——哪怕你取消了导航，浏览器还是会触发iframe的unload/load事件，导致它丢失自身状态。

问题根源 #

当浏览器接收到导航指令（比如点击后退按钮），不管最后是否取消导航，它都会先触发一系列页面资源的状态检查流程。iframe作为独立的浏览上下文，会被这个过程触发unload事件；之后即使你选择取消导航，浏览器也会自动重新加载iframe，最终导致它的状态丢失。

而Prompt组件底层依赖history.block实现，但它没有暴露取消导航后的回调钩子，所以我们没办法在用户取消导航时自动处理iframe的状态恢复。

解决方案：自定义导航拦截逻辑 #

我们可以自己封装history.block来替代Prompt，这样就能在用户选择“取消导航”时，手动控制iframe的状态恢复。

代码示例

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

const FormPage = () => {
  const history = useHistory();
  const iframeRef = useRef(null);
  // 标记表单是否有未保存内容
  const [formDirty, setFormDirty] = useState(false);
  // 标记当前是否处于导航流程中
  const [isNavigating, setIsNavigating] = useState(false);
  // 保存iframe的初始src，用于后续重置
  const [originalIframeSrc, setOriginalIframeSrc] = useState('');

  // 初始化时保存iframe的原始地址
  useEffect(() => {
    if (iframeRef.current) {
      setOriginalIframeSrc(iframeRef.current.src);
    }
  }, []);

  // 自定义导航拦截逻辑
  useEffect(() => {
    // 调用history.block注册拦截器
    const unblock = history.block((location, action) => {
      // 表单未修改，直接允许导航
      if (!formDirty) return true;

      setIsNavigating(true);
      const confirmLeave = window.confirm('表单内容未保存，确定要离开吗？');
      
      if (confirmLeave) {
        // 用户确认离开：解除拦截，允许导航
        unblock();
        return true;
      } else {
        // 用户取消导航：重置iframe状态，终止导航
        setIsNavigating(false);
        if (iframeRef.current && iframeRef.current.src !== originalIframeSrc) {
          // 重置iframe的src，恢复到导航前的状态
          iframeRef.current.src = originalIframeSrc;
        }
        return false;
      }
    });

    // 组件卸载时解除拦截
    return unblock;
  }, [history, formDirty, originalIframeSrc]);

  return (
    <div>
      {/* 表单区域：输入内容时标记为未保存 */}
      <form onInput={() => setFormDirty(true)}>
        <input type="text" placeholder="输入表单内容..." />
        <button type="button" onClick={() => setFormDirty(false)}>保存表单</button>
      </form>

      {/* 控制iframe的src：导航过程中临时置空，避免不必要的加载 */}
      <iframe 
        ref={iframeRef} 
        src={isNavigating ? '' : originalIframeSrc} 
        width="100%" 
        height="400"
        title="内嵌业务页面"
      />
    </div>
  );
};

export default FormPage;

方案说明

1. 接管导航拦截：用history.block替代Prompt，这样我们能直接拿到用户的导航选择结果。
2. iframe状态重置：通过保存iframe的初始src，在用户取消导航时手动重置，让iframe回到导航前的状态。
3. 导航状态标记：用isNavigating临时控制iframe的src，避免在导航流程中触发不必要的加载操作。

进阶优化（如果iframe是可控的） #

如果内嵌的iframe是你自己开发的页面，可以通过postMessage实现更优雅的状态恢复：

1. 在iframe内部监听beforeunload事件，把当前状态保存到localStorage或内存中。
2. 父页面在用户取消导航时，给iframe发送恢复状态的消息。

iframe内部代码示例：

// 保存状态到localStorage
window.addEventListener('beforeunload', () => {
  const currentState = { /* 你的iframe当前状态 */ };
  localStorage.setItem('iframe-state', JSON.stringify(currentState));
});

// 监听父页面的恢复指令
window.addEventListener('message', (e) => {
  if (e.data.type === 'RESTORE_IFRAME_STATE') {
    const savedState = JSON.parse(localStorage.getItem('iframe-state'));
    if (savedState) {
      // 将状态应用到iframe页面中
      console.log('恢复iframe状态:', savedState);
    }
  }
});

父页面取消导航时发送消息：

// 替换之前重置src的代码
iframeRef.current.contentWindow.postMessage(
  { type: 'RESTORE_IFRAME_STATE' }, 
  '*' // 注意：生产环境请指定具体的域名
);

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