DEV Community

Detecting user leaving page with react-router-dom v6.0.2

Muhammad Bilal Bangash on January 23, 2022

Introduction: Before reading this article you should know about React Routing, its working. Main Focus of this post is detecting user l...

Read full post

mleister97 • Nov 15 '22

Small bug:

Make sure to also set the lastLocation to null inside the method cancelNavigation.

Why?

Imagine:

Filling out a form
Switch page
"Are you sure dialog" will open
Cancel the dialog (stay on page)
Update the form values again
Submit the form via the default submit button
Hook will keep the last location reminded and switch page now, even if not intended

Miguel Palacio • Feb 28 '22

Thanks a lot Muhammad! 🙏🏼

This was extremely helpful. Worked like a charm.

Miguel Palacio • Mar 2 '22

I had to modify useCallbackPrompt a little bit, as it didn't work properly when the component wasn't unmounted after a "confirmed navigation".

export function useCallbackPrompt(when) {
    const navigate = useNavigate();
    const location = useLocation();
    const [showPrompt, setShowPrompt] = useState(false);
    const [lastLocation, setLastLocation] = useState(null);
    const [confirmedNavigation, setConfirmedNavigation] = useState(false);

    const cancelNavigation = useCallback(() => {
        setShowPrompt(false);
    }, []);

    // handle blocking when user click on another route prompt will be shown
    const handleBlockedNavigation = useCallback(
        (nextLocation) => {
            // in if condition we are checking next location and current location are equals or not
            if (!confirmedNavigation && nextLocation.location.pathname !== location.pathname) {
                setShowPrompt(true);
                setLastLocation(nextLocation);
                return false;
            }
            return true;
        },
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [confirmedNavigation, location]
    );

    const confirmNavigation = useCallback(() => {
        setShowPrompt(false);
        setConfirmedNavigation(true);
    }, []);

    useEffect(() => {
        if (confirmedNavigation && lastLocation) {
            navigate(lastLocation.location.pathname);

            // Clean-up state on confirmed navigation
            setConfirmedNavigation(false);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [confirmedNavigation, lastLocation]);

    useBlocker(handleBlockedNavigation, when);

    return [showPrompt, confirmNavigation, cancelNavigation];
}

The changes are:

[confirmedNavigation, location] - added location to the handleBlockedNavigation hook. The location object changes and the location.pathname value remains outdated.
setConfirmedNavigation(false); - set after the programmatic navigation, state needed to be cleaned up so that future prompts are displayed.

Sorry if I'm not clear enough. I'm short of time and cannot elaborate a lot. Hopefully it will be useful for someone.

Thanks.

Muhammad Bilal Bangash • Mar 4 '22

Thank you Miguel Palacio for fixing :)

Adebiyi Adeyinka • Jan 17

Using React Router Dom V6, there is no navigator.block() function. use custom history and history.block() function instead, as mentioned in Drew Reese answer on stackoverflow

Proddy • Jan 15 '23

Thanks Muhammad for this post. I've been after a nifty solution for this.

One enhancement would be to check if the form value has actually changed, before triggering the dialog? This would mean comparing values in handleChange() and keeping the original form values/states. Any ideas how to implement this?

Mouerr • Jul 19 '22 • Edited

Hi thanks a lot.
When i click in page reload button, it shows the default browser alertbox. any idea how to solve it?

Jack Whisler • Jul 27 '22

Having the same issue. Have you made any progress?

Maria Felecan • Jun 20 '23

Could this be work with some updates if we have a multi-page form? e.g. different pathnames for each step "/form/step1" and "/form/step2"?

IsmailButt6926 • Jun 15 '23

can u please give me a solution with react router dom version 6.8.1 ...this code is not working in my case becuase it gives an error that navigator.block is not a function ...can any one help me?

Mandar Fokmare • Nov 17 '23

Facing same issue,Did you get any solution.?

Sumiya Sayeed • Dec 11 '23

I am getting the following error

Any idea how to solve it?

Pankaj Thakur • Jan 14 '23

can we have custom popup for browser refresh as well. I tried your code & got the browser default only. Is there a way to show custom message on browser reload?

Jai Saravanan • Nov 30 '22

Could we have custom message in the browser prompt?

Muhammad Bilal Bangash • Dec 19 '22

I think it's normal to not be able to control everything, it looks like we are not able to add custom functionality to onbeforeunload. developer.chrome.com/blog/chrome-5...
@jaisaro14 @jackwhisler1 @mouerr