React，检测用户是否要离开当前页面答案

【问题标题】：React, Detect if user is going to leave the current pageReact，检测用户是否要离开当前页面
【发布时间】：2018-02-13 10:02:12
【问题描述】：

您好，感谢您抽出宝贵时间！

我正在学习 React 课程：https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents

自课程拍摄以来，React Router API 似乎发生了很大变化。

在课程中教授如何使用 willTransitionFrom 和 willTransitionTo ，它们看起来都已被弃用：https://github.com/ReactTraining/react-router/issues/1388

我想继续，我已经尝试检测用户是否要离开当前页面。我已经完成了：

  window.addEventListener('beforeunload', (event) => {
    if (!(window.confirm("DO YOU really want to exit a fun page like this?"))) {
        event.preventDefault();
    }
});

还有：

window.onbeforeunload = (event) => {
        if (!(window.confirm("DO YOU really want to exit a fun page like this?"))) {
            event.preventDefault();
        }
    };

看起来他们都没有被触发，因为我想在您尝试加载另一个页面时显示确认对话框。

我已阅读： How to check if user is refreshing the page or navigating to other page How to display a pop up, when a user tries to leave the current page? https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

感谢您的帮助。

【问题讨论】：

它被触发了，但你没有阅读文档：“注意：为了防止不需要的弹出窗口，浏览器可能不会显示在 beforeunload 事件处理程序中创建的提示，除非页面已经被交互有，甚至可能根本不显示它们。”和“_各种浏览器忽略事件结果，不要求用户确认”

标签： javascript reactjs

【解决方案1】：

试试这个（选自https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload）

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});

【讨论】：