NextJs <Link> 不会触发 beforeunload 事件。在离开页面之前尝试提示用户答案

【问题标题】：NextJs <Link> wont trigger beforeunload event. Trying to prompt user before leaving pageNextJs <Link> 不会触发 beforeunload 事件。在离开页面之前尝试提示用户
【发布时间】：2021-10-26 08:01:09
【问题描述】：

我试图在离开页面之前提示用户。我注意到当用户从元素链接进入页面然后当我点击返回时，触发 beforeunload 事件。

但是，当用户通过 NextJs Link 组件进入页面时，点击返回不会触发 beforeunload 事件。

如何在使用组件时仍然提示用户？

例如，通过此链接进入页面并单击返回不会在卸载前触发

<Link href={`/event/${encodeURIComponent(event.slug)}`}>
      <a>
        <h3>{event.name}</h3>
      </a>
</Link>

但是常规的元素链接会在点击返回时触发 beforeunload

例子

<a href={"event/" + event.slug}>
      <h3>{event.name}</h3>
</a>

【问题讨论】：

像Want to have an event handler for the browser's back button with next.js 这样的解决方案是否适用于您的用例？它使用next/router 的beforePopState 来监听路由变化。

标签： javascript reactjs next.js

【解决方案1】：

根据Next.js 文档，当您使用Link 组件时：

可以通过 next/link 导出的 Link 组件启用路由之间的客户端转换。 Next.js 路由器允许您在页面之间进行客户端路由转换，类似于单页应用程序。

你正在使用Link 组件来改变你的路线，所以它被认为你是在一个单页上（甚至多次来回）。

现在，看看Window: beforeunload event 上的MDN：

当窗口、文档及其资源即将被卸载时，会触发 beforeunload 事件。此时文档仍然可见，并且事件仍然可以取消。

因此，当您使用具有上述特定功能的 Link 组件时，这不是正确的行为。

作为解决问题的解决方案，您可以添加useEffect 挂钩并对其或cleanup 方法执行适当的操作。例如，将您的函数放在所需页面上的useEffect 中，以便在组件确实安装时调用。这样，路由或页面的每一次变化都会触发useEffect。

【讨论】：