reactjs - 检测用户何时离开单页应用
问题描述
当用户尝试离开单页应用程序时，我想弹出一个带有“取消”和“是”按钮的模式。
为了提供一些上下文，我正在开发一个出现在不属于单页应用程序的较大站点上的单页应用程序（因此，页眉和页脚是较大站点的一部分，而单页应用程序是内容）。当用户尝试离开网站的另一部分（例如通过单击导航中的某处）时，该部分不属于单页应用程序，我希望显示警告模式并显示警告。用户可以根据需要关闭或刷新页面，并且不应弹出模式。如果用户硬编码一个 url（比如google.com在浏览器中），同样的事情，模态不应该弹出。
到目前为止，我在 stackoverflow 上找到的其他类似线程要么使用Prompt组件，要么使用window.onbeforeunload. 这两者都有一个问题，即弹出一个带有警告的默认文本框，而不是自定义模式，这是一个重要问题，但这并不是问题的全部。
Prompt，据我了解，每当用户在单页应用程序中重定向时触发，这不是我想要的行为。
window.onbeforeunload，据我了解，即使刷新或关闭也会触发，这不是我想要的行为。
也许这不是一个常见的问题，因为我似乎无法找到一个简单的解决方案，但任何和所有的想法都非常感谢。