React.js组件卸载前显示确认模态框的实现策略咨询

嘿，这个坑我太熟了！componentWillUnmount之所以没用，是因为它触发的时候组件已经进入卸载流程了——这时候再弹模态框，根本拦不住组件被销毁或者页面跳转，时机完全不对。下面给你几个可行的方案，分场景来看：

1. 单页应用内部路由跳转：用React Router的history.block #

如果你的项目用了React Router，这是最直接的方案。history.block可以在路由跳转前拦截，让你自定义确认逻辑。

举个函数组件的例子：

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

function EditableForm() {
  const history = useHistory();
  const [isFormDirty, setIsFormDirty] = useState(false);

  // 标记表单为"已修改"状态
  const handleInputChange = () => setIsFormDirty(true);

  useEffect(() => {
    // 设置路由拦截
    const unblockHandler = history.block((transition) => {
      if (!isFormDirty) return true; // 表单没修改，直接允许跳转

      // 这里可以替换成你的自定义模态框，先用浏览器默认confirm举例
      const shouldLeave = window.confirm('您即将离开当前页面，确定要继续吗？');
      if (shouldLeave) {
        unblockHandler(); // 解除拦截，避免后续重复触发
        transition.retry(); // 重试刚才的跳转
      }
      return false; // 阻止当前跳转
    });

    // 组件卸载时清除拦截
    return unblockHandler;
  }, [history, isFormDirty]);

  // 表单提交时，取消"脏状态"，避免拦截提交后的跳转
  const handleSubmit = (e) => {
    e.preventDefault();
    setIsFormDirty(false);
    // 执行你的表单提交逻辑...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={handleInputChange} placeholder="输入内容..." />
      <button type="submit">提交</button>
    </form>
  );
}

2. 处理外部链接、页面刷新/关闭：结合beforeunload和点击监听 #

history.block管不了外部链接跳转、页面刷新或者关闭标签页的情况，这时候要分两步处理：

2.1 监听beforeunload事件（处理刷新/关闭）

这个事件是浏览器提供的，用来拦截页面卸载。不过要注意：现代浏览器大多不允许自定义弹窗文案，只能用浏览器自带的确认框。如果一定要自定义模态框，得结合下面的点击监听。

useEffect(() => {
  const handleBeforeUnload = (e) => {
    if (isFormDirty) {
      e.preventDefault();
      e.returnValue = ''; // 必须设置这个，部分浏览器才会弹出确认框
    }
  };

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

2.2 拦截外部链接点击（自定义模态框）

要自定义弹窗的话，得监听页面上所有链接的点击事件，判断是否是外部链接，然后手动拦截并弹出自己的模态框：

import { useState, useEffect } from 'react';

function EditableForm() {
  const [isFormDirty, setIsFormDirty] = useState(false);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const [pendingUrl, setPendingUrl] = useState(null);

  const handleInputChange = () => setIsFormDirty(true);

  // 监听链接点击
  useEffect(() => {
    const handleLinkClick = (e) => {
      const link = e.target.closest('a');
      if (!link || !isFormDirty) return;

      // 排除表单内部的按钮/链接（比如提交按钮）
      if (link.closest('form')) return;

      // 判断是否是外部链接
      const isExternal = link.origin !== window.location.origin;
      if (isExternal) {
        e.preventDefault();
        setPendingUrl(link.href);
        setShowConfirmModal(true);
      }
    };

    document.addEventListener('click', handleLinkClick);
    return () => document.removeEventListener('click', handleLinkClick);
  }, [isFormDirty]);

  // 确认离开的逻辑
  const confirmLeave = () => {
    setShowConfirmModal(false);
    if (pendingUrl) window.location.href = pendingUrl;
  };

  // 取消离开
  const cancelLeave = () => {
    setShowConfirmModal(false);
    setPendingUrl(null);
  };

  return (
    <>
      <form>
        <input type="text" onChange={handleInputChange} placeholder="输入内容..." />
        <button type="submit">提交</button>
      </form>

      {/* 自定义模态框 */}
      {showConfirmModal && (
        <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ background: 'white', padding: '20px', borderRadius: '8px' }}>
            <p>您即将离开当前页面，确定要继续吗？</p>
            <div style={{ display: 'flex', gap: '10px', marginTop: '15px' }}>
              <button onClick={confirmLeave}>是</button>
              <button onClick={cancelLeave}>否</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

关键注意点 #

• 区分表单提交和离开：一定要在表单提交时把isFormDirty设为false，不然用户提交表单后也会弹出确认框，体验极差。
• 脏状态判断：不要每次都弹框，只有当用户修改了表单内容（即表单处于“脏”状态）时才触发拦截，不然用户没改内容就跳转的话，弹框会很烦人。
• 清理监听：所有添加的事件监听（比如beforeunload、click），一定要在组件卸载时清除，避免内存泄漏。

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