How to intercept route changes?

[janhesters]

Based on same React state (streaming app, so e.g. the user currently streaming), we need to intercept the navigation of the user. The user needs to be prompted, whether he wants to continue leaving the page, or not. If he is sure he wants to leave the page, we need to continue with the navigation. If not, we need to cancel the navigation. How do you do this with Next.js?

I have seen a big discussion about this in this PR #5377 that (IMO) has been closed prematurely. Is there an official way of achieving the aforementioned behavior? If not, can we make this a feature request?

One suggested solution has been to use custom link tags, but some of our navigation happens inside of Redux Sagas programatically. So we need to somehow be able to act based on events from the Next.js Router and cancel if necessary.

API Example

Router.events.on('beforeRouteChange', () => isStreaming && confirm('Do you really want to leave?'));

[mattboon]

I recently used the workaround in this thread, but would love to see a proper feature implemented.

Router.events.on('routeChangeStart', () => {
  // Cancel routeChange event by erroring
  // See https://github.com/zeit/next.js/issues/2476
  Router.events.emit('routeChangeError')
  throw `routeChange aborted. This error can be safely ignored - https://github.com/zeit/next.js/issues/2476.`
})

[flippidippi]

I found that this almost works but behaves weird when using the back and forward browser buttons. Sometimes it'll still change the url but not the page itself.

[ItsJohnTheDeveloper]

@flippidippi Same issue is happening to me intermittently. Sometimes I get default browser confirmation window and other times I will get my custom confirmation message

[fitra36]

@flippidippi @ItsJohnTheDeveloper is there any solution ?

[dvakatsiienko]

+1 on this topic. It is highly desirable to have route change abort if false is returned from an event handle for instance.

Router.events.on('beforeHistoryChange', (route: string) => {
    if (route.includes('PRIVATE_ROUTE_NAME')) {
        return false;
    }

    return true;
});

[bailing-li-miidas]

When false is returned, the url of browser should not be changed.

[alipetarian]

I tried that but its not working for me.

`const handleBeforeHistoryChange= (route) => {
console.log('BEFORE HISTORY CHANGE', route)
return false
};

useEffect(() => {
console.log("SETUP", router.query, router.asPath);

// on initial page load.
handleRouteChange(router?.asPath || "");

// router.events.on("routeChangeStart", handleRouteChange);
router.events.on("routeChangeComplete", handleRouteChange);
router.events.on('beforeHistoryChange',handleBeforeHistoryChange)

return () => {
  // router.events.off("routeChangeStart", handleRouteChange)
  router.events.off("routeChangeComplete", handleRouteChange)
  router.events.off('beforeHistoryChange',handleBeforeHistoryChange)
};

}, []);
`

[bailing-li-miidas]

Sorry, it is the return value of beforePopState method and it worked for me.
When return false, it is need to rollback the browser history.

   const lastHistoryStateRef = useRef(global.history?.state);

    router.beforePopState(({ url }) => {
      if (!canPopup(url, 'POP')) {
        const lastHistoryState = lastHistoryStateRef.current;
        if (lastHistoryState && window.history.state && lastHistoryState.idx !== window.history.state.idx) {
          window.history.go(lastHistoryState.idx < window.history.state.idx ? -1 : 1);
        }
        return false;
      }
      return true;
    });

[jflayhart]

Is there anything in NextJS that reliably handles this type of behavior? I'm trying to do something similar to what the history library allows:

history.block(location => {
  if (location.pathname === '/') return false
  else return true
})

[janhesters]

The solution we ended up using was globally listening to events. We created a RouteInterceptor component, that was added to our Layout component. We spy on the events using composedPath.

const handleClick = event => {
  if ([/* ... blocked paths ... */].includes(router.pathname)) {
    const eventWillRedirect = event
      .composedPath()
      .filter(el => el.nodeName === 'A');

    // interceptionConfig defines custom rules and settings for route interception
    const config = interceptionConfig();

    if (eventWillRedirect.length && config.shouldIntercept) {
      const path = eventWillRedirect[0].attributes.href.value;
      // custom logic for our purposes
      const areaPrefix = `/areas/${areaSlug}`;
      const urlIsInsideArea = path.indexOf(areaPrefix) === 0;

      if (urlIsInsideArea) {
        event.preventDefault();
        // opens route interceptor modal which has a button to continue or to abort
        openModal({ contentName: 'routeInterceptor' });
        setInterceptedRoute(path);
        setInterceptedAsPath(getGenericPath(path));
        setInterceptionReason(config.reason);
      }
    }
  }
};

And then set up the listener in a useEffect:

useEffect(() => {
  document.addEventListener('click', handleClick, { capture: true });

  return () =>
    document.removeEventListener('click', handleClick, { capture: true });
}, [/* ... deps from Redux */, handleClick]);

[Fensterbank]

Thanks for the discussion and the possible workarounds.
Using your examples I built a custom hook, which can be used with useLeavePrevention() in any component.

const handleWindowClose = (e) => {
  e.preventDefault();
  return (e.returnValue = 'Are you sure you want to leave?');
};

let leaveConfirmed = false;

export const useLeavePrevention = () => {
  const router = useRouter();

  // Use beforeunload to prevent closing the tab, refreshing the page or moving outside the Next app
  useEffect(() => {
    window.addEventListener('beforeunload', handleWindowClose);

    return () => {
      window.removeEventListener('beforeunload', handleWindowClose);
    };
  });

  // Use routeChangeStart to prevent navigation inside of the Next app
  // Uses a module variable to bypass the confirm, otherwise we would be in a loop
  router.events.on('routeChangeStart', () => {
    if (leaveConfirmed) return;

    if (window.confirm('Are you sure you want to leave?'))
      leaveConfirmed = true;
    else {
      router.events.emit('routeChangeError');
      throw 'routeChange aborted.';
    }
  });

  // Set the module variable to false on component mount
  useEffect(() => {
    leaveConfirmed = false;
  }, []);
};

I don't have any parameters so it always asks and this global module variable could bring up some issues, but for my case it works and you get the rough idea.

[christianwish]

@Fensterbank
Inspired by your last comment I could create a custom hook that shows a custom Prompt:

import { useEffect, useReducer, useState } from 'react';
import { useRouter } from 'next/router';

export const useDataReducer = (reducer, initialState = {}) => {
    const router = useRouter();
    const [changed, setChanged] = useState(false);
    const [{nextRoute, confirmed }, setNextRoute] = useState({ nextRoute: null, confirmed: false });
    const [state, dispatch] = useReducer(reducer, initialState);

    const toNextRoute = () => setNextRoute({ nextRoute, confirmed: true });
    const stayHere = () => setNextRoute({ nextRoute: null, confirmed: false });

    useEffect(() => {
        const onRouteChangeStart = (route) => {
            if (!(changed)) return undefined;

            setNextRoute({ nextRoute: route, confirmed: false });
            router.events.emit('routeChangeError');
            throw 'routeChange aborted.';
        };

        const cleanUpFunction = () => router.events.off('routeChangeStart', onRouteChangeStart);

        if (nextRoute && confirmed) {
            router.push(nextRoute)
            return cleanUpFunction;
        }

        router.events.on('routeChangeStart', onRouteChangeStart);

        return cleanUpFunction
    }, [nextRoute, confirmed, state]);

    const Prompt = () => {
        if (!(nextRoute)) return null;
        return (
            <>
                <p>Are you sure you want to leave?</p>
                <button onClick={toNextRoute}>yes</button>
                <button onClick={stayHere}>no</button>
            </>
        );
    }

    const dispatchWrap = (action) => {
        if (!changed) setChanged(true);
        dispatch(action);
    }

    const clear = () => setChanged(false);

    return [state, dispatchWrap, Prompt, clear];
  };

Usage:

const [state, dispatch, Prompt, clear] = useDataReducer(reducer, initialState);

return <>
   <Prompt />
  <MyForm>
</>

When you use dispatch the first time and then try to change the route , Prompt will render "yes" and "no" buttons.
Thanks for your inspiration.

[DanWttvn]

I leave another version based on @christianheyn solution but without the use of reducers and with a prop that conditions if the confirmation is necessary or not

export const useConfirmLeave = ({ shouldWarn }: { shouldWarn: boolean }) => {
  const router = useRouter();
  const [hasConfirmed, setHasConfirmed] = useState(false);
  const [navigationConfig, setNavigationConfig] = useState<{
    nextRoute: string | null;
    isModalOpen: boolean;
  }>({
    nextRoute: null,
    isModalOpen: false,
  });

  // Use beforeunload to prevent closing the tab, refreshing the page or moving outside the Next app
  useEffect(() => {
    const handleWindowClose = (e: BeforeUnloadEvent) => {
      if (!shouldWarn) return;
      e.preventDefault();
      const event = e || window.event;
      return (event.returnValue = 'Are you sure you want to leave?');
    };

    window.addEventListener('beforeunload', handleWindowClose);
    return () => {
      window.removeEventListener('beforeunload', handleWindowClose);
    };
  }, [shouldWarn]);

  // Use routeChangeStart to prevent navigation inside of the Next app
  useEffect(() => {
    const onRouteChangeStart = (route: string) => {
      if (!shouldWarn || hasConfirmed) return;
      else {
        setNavigationConfig({
          nextRoute: route,
          isModalOpen: true,
        });
        router.events.emit('routeChangeError');
        // eslint-disable-next-line @typescript-eslint/no-throw-literal
        throw 'navigation aborted';
      }
    };
    router.events.on('routeChangeStart', onRouteChangeStart);
    const cleanUp = () =>
      router.events.off('routeChangeStart', onRouteChangeStart);

    if (hasConfirmed) {
      if (!navigationConfig.nextRoute) return;
      void router.push(navigationConfig.nextRoute);
      return cleanUp;
    }

    return cleanUp;
  }, [navigationConfig, hasConfirmed, router, shouldWarn]);

  const ConfirmLeaveModal = () => (
    <DataNotSavedModal
      isOpen={navigationConfig.isModalOpen}
      onConfirm={() => setHasConfirmed(true)}
      onCancel={() => {
        setNavigationConfig({
          nextRoute: null,
          isModalOpen: false,
        });
      }}
    />
  );

  return {
    ConfirmLeaveModal,
  };
};

Usage

const { ConfirmLeaveModal } = useConfirmLeave({
  shouldWarn: formState.isDirty && !formState.isSubmitted,
});

return (
  <>
    <ConfirmLeaveModal />
    <Form />
  </>
);

[YYCoder]

best solution ever, thanks a lot!!!

[kshashank231]

The custom Dialog is not working anymore in Nextjs 13, as the router events are removed from this version.

[GorkemSahin]

Might be an alternative: #2476 (comment)

[eric-burel]

Hi, I am working on a more robust alternative. I don't like the idea of coupling too much this feature with the framework. Here is what I am implementing currently link to the code Updated code here

Basically, I split the process in multiple steps:

• there is a generic hook that handles standard browser level blocking/unblocking as usual + the confirmation message, this is what I've linked
• it triggers 2 special events, "blocktransition" and "unblocktransition"
• in your Next.js app, you can listen those events to setup the blocking for SPA transition, so using Next own routers. There you can use the code that has been demonstrated or Next specific events.
• But you could also listen to those event in a React Router based app => the "blocktransition" event allows decoupling the browser part , your app, and the actual router implementation provided by the framework.

If you switch framework in 5 years, no problem, there is no coupling (in our case we strive to support any React based framework so Gatsby, Next, our legacy Meteor version of Vulcan).

[eric-burel]

Can you please elaborate the thumbs down? I've updated the link to the updated code as I've fixed a few issues in the existing one.

[adams-family]

Hi @eric-burel - new to this thread, I was wondering if the route change intercepting has been implemented in the meantime? I think it's crucial to prevent user's data loss on accidental back-button gesture (very easy to do in Chrome). Thanks!

[prakhar-parashar-au7]

Heyy, I'm using next.js, this code works fine when I use it in [path].js , and when route is being changed from '/something' to '/somethingelse',
but it doesn't work when I put it in index.js, and when I'm going from '/' to '/somethingElse'. Is there any reason why it doesn't work in index.js?

[chloekim02]

it's been a while, did you find a solution?

[yechukim]

I am trying to go other url when there is no history
but this doesn't work
any ideas?

  useEffect(() => {
    //console.log(historyIndex);
    const beforeHistoryChange = () => {
      if (historyIndex === 0) {
        router.push('/campaigns2');
      }
    };
    router.events.on('beforeHistoryChange', beforeHistoryChange);

    return () => {
      router.events.off('beforeHistoryChange', beforeHistoryChange);
    };
  }, []);

[joe-shajan]

how can i do this in latest app router?

[prince272]

Support for App Router

[ray-silicon-rhino]

yeah please, I'm having the issue of having an event listener in routeChangeStart, is there a way to do this in the new appRouter?

[johannbuscail]

any way to do this now ?

[ihsanmaulanahamdani]

How to use router.beforePopState in NextJs 13/14. Please help, Thank you.

[cgfeel]

Intercept route changes at the NextJS app router mode

Demo：[codeSondbox]

cf6e2e9c42a4f29b1dacadffb58c9a1f_723815601830_v_1702122801840414.mp4

source code: https://github.com/cgfeel/next.v2/tree/master/routing-file/src/app/leaving/proxy

Use this Provider in your layout at the app root directory：https://github.com/cgfeel/next.v2/blob/master/routing-file/src/components/proxyProvider/index.tsx

'use client'

import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { FC, PropsWithChildren, createContext, useEffect, useState } from "react";

const ProxyContext = createContext<ProxyInstance>([undefined, () => {}]);

const ProxyProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
    const [tips, setTips] = useState<string|undefined>();
    const msg = tips === undefined ? tips : (tips||'Are you sure want to leave this page?');

    const pathname = usePathname();
    const searchParams = useSearchParams();

    const url = [pathname, searchParams].filter(i => i).join('?');
    useEffect(() => {
        setTips(undefined);
    }, [url, setTips]);

    useEffect(() => {
        const handleBeforeUnload = (event: BeforeUnloadEvent) => {
            if (msg === undefined) return msg;
            
            event.preventDefault();
            event.returnValue = msg;
            
            return msg;
        };

        const script = document.getElementById('proxy-script');
        if (script) {
            script.dataset.msg = msg||'';
            script.dataset.href = location.href;
        }

        window.addEventListener("beforeunload", handleBeforeUnload);
        return () => {
            window.removeEventListener("beforeunload", handleBeforeUnload);
        }
    }, [msg]);

    return (
        <ProxyContext.Provider
            value={[msg, setTips]}
        >
            <Script
                strategy="afterInteractive"
                id="proxy-script"
                dangerouslySetInnerHTML={{
                    __html: `(() => {
                        const originalPushState = history.pushState.bind(history);
                        let currentPoint = 0;
                        let point = 0;
                        window.history.pushState = function(state, title, url) {
                            state.point = ++point;
                            currentPoint = point;
                            originalPushState(state, title, url);
                        };
                        const originalReplaceState = history.replaceState.bind(history);
                        window.history.replaceState = function(state, title, url) {
                            state.point = currentPoint;
                            originalReplaceState(state, title, url);
                        };
                        window.addEventListener('popstate', function (event) {
                            const { state: nextState } = event;
                            const isback = currentPoint > nextState.point;

                            currentPoint = nextState.point;

                            const script = document.getElementById('proxy-script');
                            if (!script || location.href === script.dataset.href) return;

                            const msg = script.dataset.msg||'';
                            const confirm = msg == '' ? true : window.confirm(msg);
                            if (!confirm) {
                                event.stopImmediatePropagation();
                                isback ? history.forward() : history.back();
                            }
                        });
                    })()`,
                }}
            ></Script>
            {children}
        </ProxyContext.Provider>
    );
};

export type ProxyInstance = [
    string|undefined, (tips?: string) => void
]

export { ProxyContext };

export default ProxyProvider;

[mrzarkovic]

amazing, but it also works!