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 🦘

[taufik-nurhidayat]

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

[adi-webxpert]

it's not working if you are using App directory bcz we used here useRouter from navigation

[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

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

[IDJGILL]

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)

This doesn't work when user clicks back, any idea how get around with that?. I am pulling my hair for 3 days and yet no solution found so far.

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

[taufik-nurhidayat]

nice, maybe i want to try this

[christianmat]

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

[Yefee8]

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

[steve-aldrin]

"use client";

import { useRouter } from "next/navigation";
import { memo, useEffect, useRef, useState } from "react";
import { LeavingDialog } from "../components/ui/LeavingDialog";

type PreventNavigationProps = {
  isDirty: boolean;
  backHref: string;
  resetData: () => void;
};

export const PreventNavigation = ({
  isDirty,
  backHref,
  resetData,
}: PreventNavigationProps) => {
  const [leavingPage, setLeavingPage] = useState(false);
  const router = useRouter();

  /**
   * Function that will be called when the user selects `yes` in the confirmation modal,
   * redirected to the selected page.
   */
  const confirmationFn = useRef<() => void>(() => {});

  // Used to make popstate event trigger when back button is clicked.
  // Without this, the popstate event will not fire because it needs there to be a href to return.
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.history.pushState(null, document.title, window.location.href);
    }
  }, []);

  useEffect(() => {
    /**
     * Used to prevent navigation when user clicks a navigation `<Link />` or `<a />`.
     * @param e The triggered event.
     */
    let lastClickTime = 0;
    const debounceTime = 300; // milliseconds
    
    const handleClick = (event: MouseEvent) => {
      const now = Date.now();
      if (now - lastClickTime < debounceTime) return;
      lastClickTime = now;
    
      console.log("i handled it ");
    
      let target = event.target as HTMLElement;
      while (target && target.tagName !== "A") {
        target = target.parentElement as HTMLElement;
      }
    
      if (target && target.tagName === "A") {
        target = target as HTMLAnchorElement;
    
        if (isDirty && typeof window !== "undefined"&&target.href !== window.location.href) {
          console.log("i checked ");
          window.history.pushState(null, document.title, window.location.href);
    
          confirmationFn.current = () => {
            router.push(backHref);
          };
    
          setLeavingPage(true);
        }
      }
    };
    /**
     * Used to prevent navigation when using `back` browser buttons.
     */
    const handlePopState = () => {
      if (isDirty&&typeof window !== "undefined") {
        window.history.pushState(null, document.title, window.location.href);

        confirmationFn.current = () => {
          router.push(backHref);
        };

        setLeavingPage(true);
      } else {
        if(typeof window !== "undefined")
        window.history.back();
      }
    };

    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      if (isDirty) {
        e.preventDefault();
        e.returnValue = "";
      }
    };

    if(typeof window !== "undefined"){
    /* *************************** Open listeners ************************** */
    document.addEventListener("click", handleClick);
    window.addEventListener("popstate", handlePopState);
    window.addEventListener("beforeunload", handleBeforeUnload);
    }

    /* ************** Return from useEffect closing listeners ************** */
    return () => {
      if(typeof window !== "undefined"){
      document.removeEventListener("click", handleClick);
      window.removeEventListener("popstate", handlePopState);
      window.removeEventListener("beforeunload", handleBeforeUnload);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  },[isDirty]);

  return (
    <>
      <LeavingDialog
        isOpen={leavingPage}
        noCallback={() => {
          setLeavingPage(false);
          confirmationFn.current = () => {};
        }}
        yesCallback={() => {
          confirmationFn.current();
          setLeavingPage(false);

          confirmationFn.current = () => {};
          resetData();
        }}
      />
    </>
  );
};

This worked for me just add the component in whatever page you want to prevent navigation.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

type LeavingDialogProps = {
  isOpen: boolean;
  yesCallback: () => void;
  noCallback: () => void;
};

export const LeavingDialog = ({
  isOpen,
  yesCallback,
  noCallback,
}: LeavingDialogProps) => {
  return (
    <AlertDialog open={isOpen}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>The data will be lost.</AlertDialogTitle>
          <AlertDialogDescription>
            Are you sure you want to leave the page?
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel onClick={() => noCallback()}>No</AlertDialogCancel>
          <AlertDialogAction className=" text-white"  onClick={() => yesCallback()}>
            Yes
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};

[scdigitalmedia]

I'm using the code below and its working well except for when i press the back button the alert pops up, the page doesn't navigate but the url changes. So if the user clicks cancel, the url is actually wrong. Is there anyway I can prevent the url to only change when the user confirms?

export const useRouteChangeConfirm = (unsavedChanges: boolean) => {
useEffect(() => {
if (unsavedChanges) {
const originalOnbeforeunload = window.onbeforeunload
window.onbeforeunload = () => {
return 'You have unsaved changes. Do you really want to leave?'
}

        const handleRouteChangeStart = (url: string) => {
            if (!confirm('You have unsaved changes. Do you really want to leave?')) {
                Router.events.emit('routeChangeError')
                throw 'Abort route change. Please ignore this error.'
            } else {
                window.onbeforeunload = null
                Router.push(url)
            }
        }

        const handleBeforeUnload = (event: BeforeUnloadEvent) => {
            event.preventDefault()
            event.returnValue = 'You have unsaved changes. Do you really want to leave?'
        }

        const handleRouteChangeComplete = () => {
            window.onbeforeunload = originalOnbeforeunload
        }

        Router.events.on('routeChangeStart', handleRouteChangeStart)
        Router.events.on('routeChangeComplete', handleRouteChangeComplete)
        window.addEventListener('beforeunload', handleBeforeUnload)

        return () => {
            Router.events.off('routeChangeStart', handleRouteChangeStart)
            Router.events.off('routeChangeComplete', handleRouteChangeComplete)
            window.removeEventListener('beforeunload', handleBeforeUnload)
            window.onbeforeunload = originalOnbeforeunload
        }
    }
}, [unsavedChanges])

}

[stychu]

This is insane that we are about to get v15 soon and yet such needed functionality is not baked in still ? Like come on.. is it a joke NextJs team ??

[SalahAdDin]

We cannot complain with the CEO here :')

[stychu]

Thats why we should complain even more!

[YonatanMateh]

I find a solution (not a great one) but a solution that works with App router:

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { NavigateOptions } from "next/dist/shared/lib/app-router-context.shared-runtime";

const useConfirmNavigation = (hasUnsavedChanges: boolean) => {
  const router = useRouter();

  useEffect(() => {
    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      if (hasUnsavedChanges) {
        event.preventDefault();
      }
    };

    const originalPush = router.push;

    router.push = (url: string, options?: NavigateOptions) => {
      if (hasUnsavedChanges) {
        const confirmLeave = window.confirm(
          "You have unsaved changes. Are you sure you want to leave?"
        );
        if (confirmLeave) {
          originalPush(url, options);
        }
      } else {
        originalPush(url, options);
      }
    };

    window.addEventListener("beforeunload", handleBeforeUnload);

    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
      router.push = originalPush;
    };
  }, [router, hasUnsavedChanges]);
};

export default useConfirmNavigation;

And thank you to ChatGpt for the initial help :)
Feel free to let me know if it's working fine!
I can share a solution for a custom modal and not the window.confirm

[XuanDuLe]

I can share a solution for a custom modal and not the window.confirm

Can you share it with everyone?
I want to this solution also

[stychu]

But this wont work for the back button press

[DesignsToGrow]

I have the same issue. This feature is super important when working with forms. I hope this gets included soon.

[Izimartin]

I am trying to introduce pop-ups to retain users attempting to leave my site.
It should shows only when the tab “x” is clicked

[SalahAdDin]

@Izimartin did you fix it?

[Izimartin]

@Izimartin did you fix it?

No not yet

[voltuer]

[SalahAdDin]

@voltuer have you a better alternative?

[steve-aldrin]

The code snippet i have shared earlier works fine check it out.

[SalahAdDin]

@steve-aldrin It hasn't been included in NextJS yet.

[steve-aldrin]

Yeah, true it's just a workaround I found.

[ypresto]

Finally I created a library for showing page leave confirmation in Next.js .

https://github.com/LayerXcom/next-navigation-guard

It works with both App Router and Pages Router.
Triggers on <Link>, router.push() family methods, back/forward button and window close.
Also supports custom dialog component.

How it works is described here:
https://speakerdeck.com/ypresto/cancel-next-js-page-navigation-full-throttle

[wottpal]

works well @ypresto, thanks for your work :) hope it's gonna be maintained and stays lightweight!

[mskwon1]

I really think this should have been included in app router.
@ypresto thanks for the great work

[blakewats]

@ypresto Wanted to give a HUGE thank you - your library is fantastic. Not only did it solve my immediate issue, it did it in a way that was extremely easy to implement and was as customizable as I needed it to be. It also handled things I didn't even initially think about, like closing the browser window. Fantastic job! And thank you SO much!

[thinhbg2812-2]

Holy smoke, it's work perfectly with backButton. Many Thanks boss

[GrahamQuan]

it works thanks

[tmyeabsira]

This feature would be nice.