当前位置：首页 > news >正文

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

news 来源：原创 2025/6/28 7:14:42

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><inputtype="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);

七、总结

适用场景：防止用户关闭/刷新页面导致数据丢失。
局限性：无法拦截 React Router 内部导航，需结合 unstable_usePrompt 实现全覆盖。
最佳实践：仅在必要时触发提示，避免过度干扰用户操作。

useBeforeUnload，可以有效保护关键数据，但需权衡用户体验与功能必要性