Next JS:在路由更改之前警告用户未保存的表单 [英] Next JS: Warn User for Unsaved Form before Route Change

问题描述

在 Next 如何在 Next JS 中停止路由器导航.

In Next How can i stop Router Navigation in Next JS.

我正在尝试使用 routerChangeStart 事件来停止导航.

I am trying to use routerChangeStart event to stop navigation.

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

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

推荐答案

这似乎没有完美的方法，但我用这个小技巧来处理它:

It seems there is no perfect way to this but I handle it with this little trick:

    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 路由以及浏览器刷新/关闭选项卡操作)

This code will interrupt changing route (with nextJs Route and also browser refresh / close tab action)

这篇关于Next JS:在路由更改之前警告用户未保存的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！