Next.js 下一个JS：在路由更改之前警告用户未保存表单

在下一节中，我如何在下一节中停止路由器导航

我正在尝试使用

routerChangeStart

事件停止导航

useEffect(() => {
    const handleRouteChange = (url: string): boolean => {
      if (dirty) { 
        return false;
      }
      return true;
    };

    Router.events.on('routeChangeStart', handleRouteChange);
    return () => {
      Router.events.off('routeChangeStart', handleRouteChange);
    };
  }, []);

---

似乎没有完美的方法，但我用这个小把戏来处理它：

    React.useEffect(() => {
      const confirmationMessage = 'Changes you made may not be saved.';
      const beforeUnloadHandler = (e: BeforeUnloadEvent) => {
        (e || window.event).returnValue = confirmationMessage;
        return confirmationMessage; // Gecko + Webkit, Safari, Chrome etc.
      };
      const beforeRouteHandler = (url: string) => {
        if (Router.pathname !== url && !confirm(confirmationMessage)) {
          // to inform NProgress or something ...
          Router.events.emit('routeChangeError');
          // tslint:disable-next-line: no-string-throw
          throw `Route change to "${url}" was aborted (this error can be safely ignored). See https://github.com/zeit/next.js/issues/2476.`;
        }
      };
      if (notSaved) {
        window.addEventListener('beforeunload', beforeUnloadHandler);
        Router.events.on('routeChangeStart', beforeRouteHandler);
      } else {
        window.removeEventListener('beforeunload', beforeUnloadHandler);
        Router.events.off('routeChangeStart', beforeRouteHandler);
      }
      return () => {
        window.removeEventListener('beforeunload', beforeUnloadHandler);
        Router.events.off('routeChangeStart', beforeRouteHandler);
      };
    }, [notSaved]);

---

此代码将中断更改路由（使用nextJs路由和浏览器刷新/关闭选项卡操作）

您可以编写自定义挂钩

从“下一个/路由器”导入路由器；
从“react”导入{useffect}；
const useWarnIfUnsavedChanges=（unsavedChanges，回调）=>{
useffect（（）=>{
const routeChangeStart=url=>{
如果（未保存的更改）{
Router.events.emit（'routeChangeError'）；
replace（Router，Router.asPath，{shallow:true}）；
抛出“中止路由更改。请忽略此错误”；
}
};
路由器.events.on（'routeChangeStart'，routeChangeStart'）；
return（）=>{
Router.events.off（'routeChangeStart'，routeChangeStart'）；
};
}，[unsavedChanges]）；
};
导出默认useWarnIfUnsavedChanges

类似于第4行（

（e | | window.event）。returnValue=confirmationMessage；

）也是检测页面刷新所必需的，至少在Chrome上是这样。