如何在React.js中每次刷新时显示带自定义提问的重载对话框？

你提供的代码已经接近实现需求，但需要结合现代浏览器的规范调整细节，确保每次刷新都能触发确认对话框：

核心原理 #

利用浏览器的beforeunload事件拦截页面刷新、关闭等卸载操作，触发系统默认的确认对话框。注意：现代浏览器已禁用自定义对话框文本，只能使用浏览器自带的提示内容，这是统一的安全规范。

优化后的代码（TypeScript） #

const handlePageReload = (event: BeforeUnloadEvent) => {
  // 必须同时设置returnValue并返回字符串，才能触发对话框
  event.returnValue = '';
  return '';
};

useEffect(() => {
  // 组件挂载时添加事件监听
  window.addEventListener('beforeunload', handlePageReload);

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    window.removeEventListener('beforeunload', handlePageReload);
  };
}, []);

关键注意点 #

• 必须同时执行event.returnValue = ''和返回字符串，缺少任一操作都可能导致对话框不触发（不同浏览器兼容要求）。
• 不要尝试自定义提示文本，所有主流浏览器（Chrome、Firefox、Edge等）都会忽略自定义内容，显示自身默认提示。
• useEffect的依赖数组保持为空，确保监听在组件挂载后一直生效，直到组件卸载，覆盖页面整个生命周期内的刷新操作。
• 部分浏览器在用户未与页面产生交互（比如刚打开页面立即刷新）时，可能不显示提示，这是浏览器的防骚扰机制，无法绕过。

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