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.

[georgebutter]

This is more afterUnload. You can't use it to popconfirm to prevent the reroute from happening.

[SalahAdDin]

This is more afterUnload. You can't use it to popconfirm to prevent the reroute from happening.

Why?

[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

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

[motherchucker]

Is it possible to use a custom modal instead of window.confirm?

[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

[GrahamQuan]

it works thanks

[dnzg]

and not working with next@15 :(

[nrathi]

@ypresto please cut a new release 🙏

[SalahAdDin]

No new release yet @nrathi

[khalidhasangtaf]

I was able to add a custom dialog/popup for back button. But could not do so for refresh/tab close button. Does it support those two things?

[tmyeabsira]

This feature would be nice.

[peachpanic]

this feature pleeeeeeaaaaseee

[pratyaksh123]

Any working method for next 15 ?

[SalahAdDin]

Most of the given examples work for Next.js 15.

[pratyaksh123]

Yeah, Got it working , thanks