Detect when user leaves the page

[lcswillems]

Feature request

Is your feature request related to a problem? Please describe.

I would like to detect when the user leaves the page. I count 3 ways of leaving a page:

• by clicking on a link
• by doing an action that triggers router.back, router.push, etc...
• by closing the tab (i.e. when beforeunload event is fired)

I know this kind of issue has already been opened here or here, but they had been magically closed (using some duplicate trick) without providing any solution.

Being able to detect when a page is leaved is very helpful for, for example, alerting the user some changes have not been saved yet.

Describe the solution you'd like

I would like something like:

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

[ghost]

+1 👍 for this feature.

[italoayres]

Have you seen the docs for Router events ?. It may do the trick.

[SalahAdDin]

It does not work anymore in the new API.

[lcswillems]

Yes, I seen it. But it doesn't. There is no way to cancel a route.

[lexxanatoli]

Any updates about this feature request?

[grapgrapMMT]

I want to prevent go to back when they click browser back button or mouse back button too.

[srcnalt]

Needed this feature just now.

[asterikx]

I think this functionality is essential for any website with forms or editable content to prevent data loss.

React Router v6 has very convenient hooks for showing a window.confirm dialog with a given message when the user tries to navigate away from the current page.

See usePrompt(message: string, when = true) and useBlocker(blocker: Blocker, when = true).

How can such functionality be realized within Next.js?

I would have expected a very similar API in Next.js. I would contribute, but I'm not familiar with Next.js routing internals (React Router leverages React Context API).

[LdsDannyStaten]

I would certainly like this feature as well

[ScottAgirs]

A much needed feature 💯

[Chukwu3meka]

This is becoming a growing issue, please vercel hear our cry.
but Have anyone tried this tool

useBeforeunload Hook (recommended)
//import { useBeforeunload } from 'react-beforeunload';

I expect it to do the work since it's built on react and I didn't seen any reliance on react-router

[closquet]

in a functional component

useEffect(() => {
    return () => {
        // do something
    };
}, []);

[icjosh10]

This did not work for me until I put keys in elements I had used in a loop and now it works as intended, thanks.

[eagleeyejack]

Was looking for a solution similar to this and found something in the Next JS docs which has solved my problem. I was looking to use local storage when the user navigated to a different page/route.

https://nextjs.org/docs/api-reference/next/router#usage-6

Might help if you're stuck like I was 🤘🏻

[shuyang0129]

Any news for this feature?

[nghiepdev]

I have a custom hook. Works for me.
Demo Codesanbox

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]);
};

UPDATED: Should be considered use beforeHistoryChange instead of routeChangeStart 🦘

[Pardaramskha]

That's neat and works really fine ; thank you for this!

[fiik346]

Wow it's work for me. Thank you sir!

[karlostuazon]

Works for me! Thanks sirrr!

[thachsteven]

Work for me, thanks bro !!!

[abdulrahimiliasu]

here is the UPDATE with beforeHistoryChange

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

export const useLeavePageConfirm = (isConfirm: boolean = true, message: string = "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("beforeHistoryChange", handler);

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

[john1625b]

Have y'all tried router.beforePopState. Does this work for detecting page changes and page refresh?

https://nextjs.org/docs/api-reference/next/router#routerbeforepopstate

[kevine921]

Yes I have tried that: beforePopState works for back but not page refresh

[pascuflow]

Anyone have some rock solid approaches besides routeChangeStartand and beforeunload events? They seem to not work when the user navigates back and forth between the same pages.

[Kipitup]

Hello,

I've created two hooks, one to detect browser refresh, the other to detect when the user is navigating to another pages (this includes back and forth navigation)

For browser refresh, I've created my own hook since I don't like to add too many packages, but this is inspired by react-beforeunload.

Here is my hook:

import { useEffect } from 'react'

// My hook simple reset session storage when user trigger a browser refresh

export default function useBeforeUnload() {
  useEffect(() => {
    const eventListener = (event) => {
     // you can do what you want here
      sessionStorage.clear()
    }

    window.addEventListener('beforeunload', eventListener)

    return () => {
      window.removeEventListener('beforeunload', eventListener)
    }
  }, [])
}

The second hook is to detect when the user is navigating to another pages. I need to save scroll position in order to restore when the user come back on a page. This is pretty troublesome in Next.js.

import { useRef, useEffect } from 'react'
import { useRouter } from 'next/router'

// Scroll position management
export default function useScrollRestoration() {
  const router = useRouter()
  const retainedComponents = useRef<{ [url: string]: number }>({})

  useEffect(() => {
    // Save the scroll position of current page before leaving but you can do what you want
    const handleRouteChangeStart = (url: string) => {
      retainedComponents.current[router.asPath] = window.scrollY
    }

    // Scroll to the saved position but you can do what you want
    const onRouteChangeComplete = (url: string) => {
      if (retainedComponents.current[router.asPath]) {
        window.scrollTo(0, retainedComponents.current[router.asPath])
      }
    }

    router.events.on('routeChangeStart', handleRouteChangeStart)
    router.events.on("routeChangeComplete", onRouteChangeComplete)

    return () => {
      router.events.off('routeChangeStart', handleRouteChangeStart)
      router.events.off("routeChangeComplete", onRouteChangeComplete)
    }
  }, [router.asPath])
}

I've added both hooks in my _app.tsx file:

import useScrollRestoration from "@/utils/hooks/useScrollRestoration";
import useBeforeUnload from "@/utils/hooks/useBeforeUnload";
import type { AppProps } from 'next/app'

// Simplified version of App
export default function App({ Component, pageProps }: AppProps) {

  useScrollRestoration()
  useBeforeUnload()

  return (
      <Component {...pageProps} />
  )
}

It's working very well. I hope it helps 😊

[rottitime]

Check out this article: https://stackoverflow.com/a/73977517/2190488

The working example also covers:

• window.confirm: for next.js router event
• beforeunload: for broswer reload, closing tab or navigating away

[florianwalther-private]

This works pretty well. The combination of beforeunload and routeChangeStart should handle all cases (refresh + navigation).

[a90100]

I recommend use router event - routeChangeStart, it will fire when a route starts to change.

usage example:

import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function MyPage() {
    const router = useRouter()

    useEffect(() => {
        const exitingFunction = () => {
            console.log('exiting...');
        };

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

        return () => {
            console.log('unmounting component...');
            router.events.off('routeChangeStart', exitingFunction);
        };
    }, []);

    return <>My Page</>
}

[GerardoVentura]

For me, worked with the routeChangeComplete event

[norflin321]

I get "Error: NextRouter was not mounted." when trying to import { useRouter } from 'next/router' because i use NextJs version 13.2.4 with app directory.

Does anyone know a solution for my situation?

[psikoi]

App directory uses useRouter from next/navigation (not next/router)

[nicolasthy]

Router events aren't available with app directory, so even by importing from next/navigation we don't have router.events

[evgeniiPerov]

Guys some solution for new version? app directory mean

[sezer]

Need a solution for the new app router. Any idea?

[nicolasthy]

Similar thread here if you want: #47020 (reply in thread)
tldr: no solution for now 😞

[masterbater]

listen to path change

[mrksph]

Just by listening to path change does not enable to cancel the navigation with app router

[optimista]

Following @pimmee's post in other related thread:
apal21/nextjs-progressbar#86 (comment)
which is based on original @jmcmullen's workaround from here:
#41745 (reply in thread)

I would like to share a temporary fix

In app/layout.js:

// This is a temporary fix for `beforeUnload` because router.events do not exist in NextJS v13
useEffect(() => {
  const handleAnchorClick = e => {
    const targetUrl = e.currentTarget.href, currentUrl = window.location.href;
    if (targetUrl !== currentUrl) {
      if (window.onbeforeunload) {
        const res = window.onbeforeunload();
        if (!res) e.preventDefault()
      }
    }
  };

  const handleMutation = () => {
    const anchorElements = document.querySelectorAll('a[href]');
    anchorElements.forEach(anchor => anchor.addEventListener('click', handleAnchorClick));
  };

  const mutationObserver = new MutationObserver(handleMutation);
  mutationObserver.observe(document, { childList: true, subtree: true });
}}, []);

In your component:

// useBeforeUnload
useEffect(() => {
  const beforeUnloadHandler = () => confirm("Changes you made has not been saved just yet. Do you wish to proceed anyway?");
  window.onbeforeunload = isUnsaved ? beforeUnloadHandler : null;
  return () => window.onbeforeunload = null;
}, [isUnsaved]);

The trick is to assign listener via =, that way we can check if it exists in app/layout.js

To integrate together with NProgress check references in the beginning of the post.

If confirm window shows twice, check if you don't have React's strict mode on, and wrap useEffect's contents in app/layout.js into

let didRunOnceInStrictMode = false;
  useEffect(() => {
    if (!didRunOnceInStrictMode) {
      didRunOnceInStrictMode = true;
      ...

It has been working nicely for me so far.

[SalahAdDin]

Do you have any available code for it?

[imMatheus]

Wrapping the useEffect in the layout.js file requires it to ba a client component, so will that not completely mess up all potential server component in your app?

[Dadangdut33]

This is it. This works the best for me but i didn't use it in layout. It can also works in custom hooks. Just combine the two together and it works fine. Ex:

export const useWarnIfUnsavedChanges = (unsaved: boolean) => {
  useEffect(() => {
    const handleAnchorClick = (e: any) => {
      const targetUrl = e.currentTarget.href,
        currentUrl = window.location.href;
      if (targetUrl !== currentUrl) {
        if (window.onbeforeunload) {
          // @ts-ignore
          const res = window.onbeforeunload();
          if (!res) {
            e.preventDefault();
          }
        }
      }
    };

    const handleMutation = () => {
      const anchorElements = document.querySelectorAll("a[href]");
      anchorElements.forEach((anchor) => anchor.addEventListener("click", handleAnchorClick));
    };

    const mutationObserver = new MutationObserver(handleMutation);
    mutationObserver.observe(document, { childList: true, subtree: true });

    // dont know if needed or not but it works
    return () => {
      mutationObserver.disconnect();
      const anchorElements = document.querySelectorAll("a[href]");
      anchorElements.forEach((anchor) => anchor.removeEventListener("click", handleAnchorClick));
    };
  }, []);

  // @ts-ignore
  useEffect(() => {
    const beforeUnloadHandler = () => {
      const yes = confirm("Changes you made has not been saved just yet. Do you wish to proceed anyway?");
      
      // you can use this condition for something, example: if you have progressbar setup you might want to cancel the animation
      // if (!yes) cancelProgressbar();
      
      return yes;
    };
    window.onbeforeunload = unsaved ? beforeUnloadHandler : null;

    return () => (window.onbeforeunload = null);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [unsaved]);
};

And call it in your component just like any other hook

const dirty = ...
useWarnIfUnsavedChanges(dirty)

[SalahAdDin]

We have NextJS 13 with a new navigation API and it does not include any feature like this, even more, it removed the only easy way to do that!!!

[rubensanroman]

Does anybody solved this ( leaving / closing the tab ) using App Router ?

I tried everything I found, but nothing seems to work.

[mrksph]

Same, would like to know if it's possible, I think for now we can't prevent navigation with app router

[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;

[fiik346]

nice, maybe i want to try this

[christianmat]

Writing this many lines of code to fix something so seemingly simple seems wild.

[Yefee8]

Hello, router. events didn't exist yet in next.js app dir but you can handle that with some hooks.
For example if you want to detect route change events you can use the useEffect's delete hook like this:

  useEffect(() => exitingFunction, []);

But if you want to detect the browser/tab closing events you can use the useBeforeUnload hook via the "react-use" library
https://github.com/streamich/react-use/blob/master/docs/useBeforeUnload.md

An example from my code:

"use client"
import { useBeforeUnload } from "react-use";

export default function Example(){
useBeforeUnload(async function () {
    await exitingFunction;

    return true;
  }, "You're leaving the page, you sure about that?");
}

return(
  <>
    Now you're handling the closing events 🔥
  </>
);

cheers ✌

[spencermayne]

This is just a wrapper for the native beforeunload, which will not fire when navigating away.

[rickyviz]

yes this not fire when navigating away, any solution for this?

[wottpal]

@timneutkens How does the Next.js team recommend to show a before-unload warning (i.e. in the context of dirty forms)?

[dgtllion]

@timneutkens any update on it? Or is it possible to put route.events back?