这个问题非常好！🌟
React Router 之所以不推荐你直接使用原生的 window.onbeforeunload，而选择封装一个自定义 Hook —— useBeforeUnload，原因主要包括以下几个方面：
✅ 原因一：React 生命周期和事件绑定冲突
原生的 onbeforeunload 是全局事件，如果你直接在组件中用：
window.onbeforeunload = (e) => {
e.preventDefault();
e.returnValue = '';
};
这会有几个 明显的问题：
- 💥 多组件会互相覆盖
onbeforeunload，谁先挂谁就会被覆盖。 - 🌀 不会自动解绑，内存泄漏风险大。
- ⛔ 和 React 的卸载流程不同步，React 无法感知这个副作用。
而 React Router 提供的：
useBeforeUnload(callback, options);
是一个符合 React 哲学（声明式 + 可组合） 的方式：
- 🧠 Hook 方式能自动跟随组件挂载/卸载。
- 🧼 自动清理监听器，避免手动解绑。
- 💡 多个组件同时使用也能互不冲突（内部管理了 handler 队列）。
✅ 原因二：跨平台一致性更好
React Router 的设计也考虑了以下场景：
- 不只是浏览器端使用，React Router 也可以跑在 SSR、React Native 等环境中。
onbeforeunload是浏览器特有的 API，在其他环境会报错。- 所以封装一个
useBeforeUnload可以做跨平台适配和降级处理。
✅ 原因三：与路由控制深度集成
React Router 是一个路由状态管理工具，当你跳转页面时：
- 并不总是发生
window.location变化（如 HashRouter）。 - React Router 控制的“导航行为”有时是虚拟导航，不会触发真正的浏览器 unload。
所以 React Router 提供 useBlocker + useBeforeUnload 来对路由行为做更精细的控制。
useBeforeUnload((event) => {
if (shouldPreventLeave) {
event.preventDefault();
event.returnValue = "";
}
});
✅ 对“点击链接”、“后退按钮”、“刷新页面”、“关闭标签页”都能统一拦截。
🧠 总结
| 特性 | 原生 onbeforeunload |
React Router 的 useBeforeUnload |
|---|---|---|
| 生命周期管理 | ❌ 手动绑定/解绑 | ✅ 自动管理 |
| 兼容多个组件 | ❌ 不支持 | ✅ 支持多个组件同时使用 |
| 路由集成度 | ❌ 浏览器级别 | ✅ React Router 路由行为控制 |
| 跨平台支持 | ❌ 仅浏览器 | ✅ 具备适配能力 |
| 编程体验 | ❌ 命令式 | ✅ 声明式 Hook 风格 |
如果你正在做一个需要在用户离开页面前提示的功能（比如表单未保存），推荐组合使用：
useBlocker(...)
useBeforeUnload(...)
让离开控制更完整、统一、跨端 ✨
需要我给你写一个完整的保存离开拦截示例吗？
