How to prevent leaving the current page when the user manually changes the URL in the browser's address bar?

[PeterM0101]

To avoid losing unsaved data, I need to prevent exiting the current page when the user manually changes the URL in the browser's address bar. I'm trying to use the "routeChangeStart" event, which only works fine for switching routes using NextJS tools like Link, router.push, etc. I'm using the "popstate" event, which only works with the browser's back and forward buttons. Could you suggest what event I can use to handle the URL change manually?

[PeterM0101]

Solved

[casperiv0]

@PeterM0101, how did you solve this issue :)?

[powerfulyang]

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

[danielfrg]

For future reference this is what I ended up with

const useLeavePageConfirm = (active = true) => {
  const beforeUnloadListener = (event: any) => {
    event.preventDefault()
    return (event.returnValue = "")
  }

  React.useEffect(() => {
    if (active) {
      addEventListener("beforeunload", beforeUnloadListener)
    } else {
      removeEventListener("beforeunload", beforeUnloadListener)
    }
  }, [active])
}

export default useLeavePageConfirm

[thinhbg2812]

this solution only work when it's hard reload page, Nextjs use soft navigate cause it not fire when user change page or using back function of browser

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

[thinhbg2812]

im not fully understand the concept of the proxy tbh

[ab-etemadi]

Preventing form page exit in Nextjs 14

I managed to come up with a model that addresses three of these possibilities:
1 - Reload the page (Handling by the browser itself)
2 - Click the “Back” button on the browser (Under our control)
3 - Navigation through application links (Under our control)

Now our Custom hook that will prevent navigation:

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

export const useWarnIfUnsavedChanges = (unsaved: boolean) => {
  const router = useRouter();

  const handleAnchorClick = (e: MouseEvent) => {
    if (e.button !== 0) return; // only handle left-clicks
    const targetUrl = (e.currentTarget as HTMLAnchorElement).href;
    const currentUrl = window.location.href;
    if (targetUrl !== currentUrl && window.onbeforeunload) {
      // @ts-ignore
      const res = window.onbeforeunload();
      if (!res) e.preventDefault();
    }
  };

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

  useEffect(() => {
    const mutationObserver = new MutationObserver(addAnchorListeners);
    mutationObserver.observe(document.body, { childList: true, subtree: true });
    addAnchorListeners();

    return () => {
      mutationObserver.disconnect();
      const anchorElements = document.querySelectorAll('a[href]');
      anchorElements.forEach((anchor) => anchor.removeEventListener('click', handleAnchorClick));
    };
  }, []);

  useEffect(() => {
    const beforeUnloadHandler = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = ''; // required for Chrome
    };

    const handlePopState = (e: PopStateEvent) => {
      if (unsaved) {
        const confirmLeave = window.confirm(
          'You have unsaved changes. Are you sure you want to leave?',
        );
        if (!confirmLeave) {
          e.preventDefault();
          window.history.pushState(null, '', window.location.href);
        }
      }
    };

    if (unsaved) {
      window.addEventListener('beforeunload', beforeUnloadHandler);
      window.addEventListener('popstate', handlePopState);
    } else {
      window.removeEventListener('beforeunload', beforeUnloadHandler);
      window.removeEventListener('popstate', handlePopState);
    }

    return () => {
      window.removeEventListener('beforeunload', beforeUnloadHandler);
      window.removeEventListener('popstate', handlePopState);
    };
  }, [unsaved]);

  useEffect(() => {
    const originalPush = router.push;

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

    return () => {
      router.push = originalPush;
    };
  }, [router, unsaved]);
};

Now just pass this component along with our form, filling in the necessary properties:

  useWarnIfUnsavedChanges(isDirty);

[NyakoFox]

Is there a way to make this work properly with next-nprogress-bar? I can't seem to figure out how to modify the code.

The issue is, when you click something on the page that uses their own router.push, it'll show the confirm dialogue, but if you click no, the progress bar still appears. It just doesn't take the user anywhere. I understand that it's because this hook replaces the built-in router.push, but the progress bar uses its own.

[stychu]

Nextjs 14.2.14 popstate does not trigger when user press browser back button thus navigation via back/forward button is not prevented via this code unfortunately.

There is a hack that makes back button work but it comes with one downside. User need to press back button twice...

 if (unsaved) {
	// without this popstate is not even triggered on browser back button..
      window.history.pushState(null, '', window.location.href);

      window.addEventListener('popstate', handlePopState);
      window.addEventListener('beforeunload', beforeUnloadHandler);
    }

[Slightom]

Thanks @stychu for response! I think you can get rid off this double pressing back button by adding router.back() in else section in handlePopState :)

const handlePopState = (e: PopStateEvent) => {
      if (unsaved) {
        if (!window.confirm(unsavedChangesWarningText)) {
          e.preventDefault();
          window.history.pushState(null, '', window.location.href);
        } else {
          router.back();
        }
      }
    };

[stychu]

Does anyone noticed that when you press back button and cancel the back button becomes disabled until u click somewhere in the page ?? Probably due to the pushState but dunno how to fix this. Its bit annoying as for the user he wont understand what to do... Also this happens on chromium. On safari it doesnt even respect the back button and just simply goes back

[thinhbg2812]

Thanks @stychu for response! I think you can get rid off this double pressing back button by adding router.back() in else section in handlePopState :)

const handlePopState = (e: PopStateEvent) => {
      if (unsaved) {
        if (!window.confirm(unsavedChangesWarningText)) {
          e.preventDefault();
          window.history.pushState(null, '', window.location.href);
        } else {
          router.back();
        }
      }
    };

with the else router.back() it's still apear and u have to click it again

[aphougat]

I tried something like this and it works, though not for somebody directly changing the url in the browser.

'use client'

import {usePathname, useRouter, useSearchParams} from "next/navigation";
import "nprogress/nprogress.css";
import nProgress from "nprogress";
import React, {useEffect, useMemo, useState} from "react";
import ExitWarningOverlay from "../../components/common/ExitWarningOverlay";

export function NavigationEvents({showExitWarningOverlayFeed, setShowExitWarningOverlayFeed}) {
    const pathname = usePathname();
    const searchParams = useSearchParams();
    const [targetUrl, setTargetUrl] = useState(null)
    const router = useRouter();
    const [showExitWarningOverlay, setShowExitWarningOverlay] = useState(false)

    const _push = useMemo(() => router.push.bind(router), []);
    useEffect(() => {
        router.push = (href, options) => {
            if(showExitWarningOverlayFeed){
                setShowExitWarningOverlay(true)
                setTargetUrl(href)
            }else{
                _push(href, options);
            }

        };
    }, [showExitWarningOverlayFeed])

 
    return showExitWarningOverlay ? <ExitWarningOverlay setShowPopup={(status) => {
        if (status) {
            setShowExitWarningOverlayFeed(false);
            setShowExitWarningOverlay(false);
            _push(targetUrl)
        } else {
            setTargetUrl(undefined)
nProgress.done();
            setShowExitWarningOverlay(false);
        }
    }}/> : null;
}

and a custom layout which wraps all pages

export const Layout = ({
                           children,
                           classes,
                           message,
                           setMessage,
                           messageClassName = 'alert info',
                           footer = true,
                           showExitWarningOverlayFeed = false,
                           setShowExitWarningOverlayFeed,
                           sx, ...other
                       }) => {
    const {user} = useAuth()
    const settings = useSettingsContext();
    const isNavHorizontal = settings.themeLayout === 'horizontal';
    return (
        <>
            <Suspense fallback={null}>
                <Notifications setMessage={setMessage} message={message} footer={footer}/>
                <NavigationEvents showExitWarningOverlayFeed={showExitWarningOverlayFeed} setShowExitWarningOverlayFeed={setShowExitWarningOverlayFeed} />
            </Suspense>
            <Box sx={{pt: `${isNavHorizontal ? 0 : SPACING}px`, ...sx}} className={classes ? classNames(classes) : null}>

                {children}
            </Box>
            {user ? '' : footer && <Footer/>}
        </>
    )
};