Detect when user leaves the page app directory router

[evgeniiPerov]

Greetings!

In the new app directory, when the client clicks the back button in the web browser, the Router doesn't have a "leave page" event, and I'm unsure about how to catch this event. Does anyone have a solution for this?

Thank you!

[SamKomesarook]

One solution could be to create a client-component wrapper in the global layout file (covering all routes) to listen for route changes, like below:

'use client'
 
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
 
export function NavigationEvents() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
 
  useEffect(() => {
    //page change logic here
  }, [pathname, searchParams])
 
  return null
}

Its not exactly a page_leave_ event, but maybe it works for your case?

[evgeniiPerov]

yea i can detect some change url, but how i can stop changing url?

[SamKomesarook]

What do you mean by "stop changing"? Like intercept the route and not let the user navigate?

[evgeniiPerov]

The goal is that when you do a form and if someone press the back button, should be confirm dialog, after cancel it stays on the page without changes

[SamKomesarook]

If I understand your goal correctly, I think using a state hook would be a be a cleaner approach than using routes, unless there is a specific need to use routes. Essencially you would just set the dialogs visibility to the value of a state hook, and if the user presses cancel, just set the state hook to false. Something like below:

const Form = () => {
const [confirmOpen, setConfirmOpen] = useState(false)
return (
<>
{/* form here...*/}
<button onClick={} text={"submit"} />
<Modal open={confirmOpen} onClose={() => setConfirmOpen(false)} />
</>
)
}

[VitHridel]

hi guys, new info? I would need to catch pressing back button in browser. Normally I would use window.onbeforeunload or in react with react-router i was using use_unstableBlocker. Has app router something similar? Because of soft navigation window.onbeforeunload is not working.

[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.
Also supports custom dialog component.

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

[motherchucker]

Seems to have issues with Link components and router.push() (next v14).
Do you know when that will be fixed?

[empz]

How is this not a native feature of Next.js yet?

[gegyhamdani]

Any update on this?

[TangevvaGadad]

You can use the beforeunload event to detect when a user tries to leave the page:

useEffect(() => {
  const handleBeforeUnload = (e) => {
    e.preventDefault();
    e.returnValue = ''; // Required for Chrome
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

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

[TangevvaGadad]

You can use the beforeunload event to detect when a user tries to leave the page:

useEffect(() => {
  const handleBeforeUnload = (e) => {
    e.preventDefault();
    e.returnValue = ''; // Required for Chrome
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

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