时间戳

首页 > 解决方案 > NextJs不会触发 beforeunload 事件。尝试在离开页面前提示用户

javascript - NextJs不会触发 beforeunload 事件。尝试在离开页面前提示用户

问题描述

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

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

使用组件时如何提示用户？

例如，通过此链接访问页面并单击返回不会触发 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>

标签： javascriptreactjsnext.js

解决方案

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

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

您正在使用该Link组件来更改您的路线，因此它被认为您在一个页面上（甚至多次来回）。

Window: beforeunload event现在，看看MDN：

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

因此，当您使用Link提到的特定组件时，这不是正确的行为。

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

推荐阅读