React 第四十节 React Router 中 useBeforeUnload的使用详细解析及案例说明-CSDN博客

本文链接：https://blog.csdn.net/weixin_39593730/article/details/147960574

useBeforeUnload 是 React Router 提供的一个自定义钩子，用于在用户尝试关闭页面、刷新页面或导航到外部网站时触发浏览器原生的确认提示。
它的核心用途是防止用户意外离开页面导致数据丢失（例如未保存的表单内容）。

一、useBeforeUnload 核心用途

拦截页面卸载事件：当用户尝试关闭标签页、刷新页面或跳转到其他网站时触发提示。
数据保护：确保用户在离开前确认操作，避免未保存的数据丢失。

二、useBeforeUnload 与 unstable_usePrompt 的区别

在这里插入图片描述

三、useBeforeUnload 基本语法

import { useBeforeUnload } from "react-router-dom";

useBeforeUnload(() => {
  if (hasUnsavedChanges) {
    return "您有未保存的更改，确定要离开吗？";
  }
});

3.1、示例：表单未保存提示

import { useBeforeUnload } from "react-router-dom";
import { useState } from "react";

function EditProfileForm() {
  const [name, setName] = useState("");
  const [isDirty, setIsDirty] = useState(false); // 标记是否有未保存的更改

  // 使用 useBeforeUnload 拦截页面卸载事件
  useBeforeUnload(() => {
    if (isDirty) {
      return "您有未保存的更改，确定要离开吗？";
    }
  });

  const handleNameChange = (e) => {
    setName(e.target.value);
    setIsDirty(true); // 输入后标记为“有未保存更改”
  };

  const handleSave = () => {
    // 保存数据后重置状态
    setIsDirty(false);
  };

  return (
    <div>
      <h1>编辑个人资料</h1>
      <input
        type="text"
        value={name}
        onChange={handleNameChange}
        placeholder="输入姓名"
      />
      <button onClick={handleSave}>保存</button>
    </div>
  );
}

3.2、参数说明

回调函数：() => string | void 返回一个字符串作为提示消息。若无需提示，返回 undefined 或不返回值。

四、useBeforeUnload 注意事项

4.1、浏览器兼容性

大多数浏览器支持自定义提示消息，但部分场景（如移动端浏览器）可能忽略消息内容，使用默认文案。

示例：Chrome 默认显示 “您所做的更改可能未保存”。

4.2、无法拦截应用内路由跳转

useBeforeUnload 只处理页面卸载事件（如关闭标签页、刷新），无法拦截 React Router 内部的路由跳转（例如 <Link> 或 navigate()）。

如果需要拦截应用内跳转，需配合 unstable_usePrompt。

4.3、合理使用条件判断

必须通过 isDirty 等状态精确控制提示逻辑，避免滥用导致用户体验下降。

提交数据后务必重置状态（如 setIsDirty(false)）。

4.4、useBeforeUnload 与 window.onbeforeunload 的区别

React Router 的 useBeforeUnload 是对原生 window.onbeforeunload 的封装，但更贴合 React 的声明式语法。

五、完整行为流程

5.1、用户在表单中输入内容 → isDirty 变为 true。
5.2、用户尝试关闭页面 → 触发 useBeforeUnload。
5.3、浏览器显示提示消息（内容取决于回调函数返回值）。
5.4、用户点击“留在页面” → 取消卸载操作。
5.5、用户点击“离开页面” → 页面关闭或刷新。

六、替代方案：直接使用原生事件

如果不使用 React Router，可通过原生 beforeunload 事件实现相同功能：

import { useEffect } from "react";

function useNativeBeforeUnload(isDirty) {
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (isDirty) {
        e.preventDefault();
        e.returnValue = "您有未保存的更改，确定要离开吗？";
      }
    };

    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [isDirty]);
}

// 在组件中调用
useNativeBeforeUnload(isDirty);