检测用户何时在Next JS中离开页面

Question

我想检测用户何时离开页面Next JS。我数了三种离开页面的方法：

1. 通过点击链接
2. 通过执行触发router.back，router.push等的动作...
3. 通过关闭标签页（即在触发beforeunload事件时

能够检测何时离开页面非常有用，例如，提醒用户某些更改尚未保存。

我想要类似的东西

router.beforeLeavingPage(() => {
    // my callback
})

Answer 1

您可以在反应页面或组件中使用默认的web api's eventhandler。

if (process.browser) {
  window.onbeforeunload = () => {
    // your callback
  }
}

Answer 2

这在下一个路由器/ react-FC中对我有用

1. 添加路由器事件处理程序
2. 添加onBeforeUnload事件处理程序
3. 在卸载组件时卸载它们

https://github.com/vercel/next.js/issues/2476#issuecomment-563190607

Answer 3

您可以使用 router.beforePopState check here for examples

Answer 4

您可以使用 react-use npm package

import { useEffect } from "react";
import Router from "next/router";
import { useBeforeUnload } from "react-use";

export const useLeavePageConfirm = (
  isConfirm = true,
  message = "Are you sure want to leave this page?"
) => {
  useBeforeUnload(isConfirm, message);

  useEffect(() => {
    const handler = () => {
      if (isConfirm && !window.confirm(message)) {
        throw "Route Canceled";
      }
    };

    Router.events.on("routeChangeStart", handler);

    return () => {
      Router.events.off("routeChangeStart", handler);
    };
  }, [isConfirm, message]);
};