ReactJS - 单击 WebBrowser 前进/后退/刷新按钮时的警报消息

Question

我需要在 ReactJS 中实现一个脚本/函数，以防止用户 Go Back 或 Refresh 或 Go Ahead 中的实际应用程序页面没有确认警报消息的 ReactJS。

我的家：本地主机：3000/ 简历页面：localhost:3000/resume

如果用户在/resume 页面中，然后意外或有意尝试使用典型的 WebBrowser 控件刷新、返回或继续，则应用在 ReactJS 中检测到该操作并显示一条警告消息，例如：e.x “哇！您正在尝试离开一个页面，如果您继续，您可能会丢失所有数据。您确定要继续吗？”

¿关于如何解决它的任何想法？

非常感谢。

Answer 1

您可以使用纯 JS 来实现这一点。 window.onbeforeunload 记录在 here 允许您在卸载页面之前执行某些操作，甚至取消事件本身。

window.onbeforeunload = (e) => {
// Your alert logic could be invoked here...
};