上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useBeforeUnload

Tags:
Browser

一种 React 钩子（Hook），用于在页面卸载前执行操作（例如，关闭、刷新页面），并可选择性地触发浏览器原生确认对话框。将 preventDefault 设置为 true，以显示确认离开对话框。

演示

尝试以不同状态关闭/刷新此页面，看看会发生什么！

源码
Show confirm dialog:
true

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

useBeforeUnload(callback, options)

回调 Callback

一个在页面可能卸载之前被调用的函数。

/** * 页面卸载前运行的回调函数 * * @param {BeforeUnloadEvent} event - `BeforeUnloadEvent`，事件对象 * @returns {void} `void` */ export type UseBeforeUnloadCallback = (event: BeforeUnloadEvent) => void

选项 Options

export interface UseBeforeUnloadOptions { /** * 是否阻止事件的默认行为，这将导致显示浏览器原生的信息提示 * * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event * * @defaultValue false */ preventDefault?: boolean }

返回值

一个清除事件监听器的清除函数。