How could I listen beforePopState for prevent de backward navigation using new app router?

[lucasoz]

I'm trying to catch the beforePopState event and use it to close a modal in mobile devices but the property doesn't exist in new app router.

Property 'beforePopState' does not exist on type 'AppRouterInstance'.

Is there another pattern to achieve this behavior?

[john-griffin]

Did you figure this out?

[Nadeera3784]

Hello @lucasoz ,
Can't we try something like this?

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handlePopstate = () => {
      // Check if the modal is open on mobile devices
      // Replace the condition with your modal open check logic
      const isModalOpenOnMobile = true; // Replace with your own logic
      if (isModalOpenOnMobile) {
        // Close the modal when navigating using browser's back/forward buttons
        // Implement your own modal close logic here
      }
    };

    window.addEventListener('popstate', handlePopstate);

    return () => {
      window.removeEventListener('popstate', handlePopstate);
    };
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

[jkhaui]

Hello @lucasoz , Can't we try something like this?

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handlePopstate = () => {
      // Check if the modal is open on mobile devices
      // Replace the condition with your modal open check logic
      const isModalOpenOnMobile = true; // Replace with your own logic
      if (isModalOpenOnMobile) {
        // Close the modal when navigating using browser's back/forward buttons
        // Implement your own modal close logic here
      }
    };

    window.addEventListener('popstate', handlePopstate);

    return () => {
      window.removeEventListener('popstate', handlePopstate);
    };
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

This is a good start which may be fine for basic implementations, however, it fails to handle more sophisticated requirements, e.g. detecting if a popstate event was caused by the user clicking their browser's back button vs. a popstate event caused by clicking an in-app back button (which subsequently triggers programmatic navigation, e.g. router.back()).

I just had the joy of spending a couple of hours solving this problem thanks to beforePopState being removed from the app router (also, curious to understand from the Next.js team what the rationale was for this? 🤔)

Anyway, here's an outline of my solution for this particular scenario outlined above:

1. Register a global event listener within a useEffect hook
2. Create a reactive boolean flag which indicates whether a popstate event was triggered by the browser, or by our application
3. ^ The tricky part here is that simply using useState() on its own won't work, because the callback passed to our popstate event listener will be reading a stale value. The solution is to combine both a ref and a stateful variable (see code below)
4. The default value of our flag is true because we will assume that any popsate event was triggered by the browser's back/forward buttons... unless we specifically override this when programmatically triggering in-app navigation (see next step)
5. We signal to our application that a popstate event did not originate from the browser by immediately setting the flag to false, e.g. within the onClick handler of an in-app back button (here we can also include any additional custom logic, such as popping an in-memory history stack).
6. Finally, we immediately set the flag back to true within a separate useEffect hook (I tried setting the flag back within the onClick handler but it didn't work and I have no idea why).

The resultant code looks something like this:

  const [fromPopState, setFromPopState] = React.useState(true);
  const fromPopStateRef = React.useRef(fromPopState);

  const handleFromPopState = React.useCallback((state: boolean) => {
    fromPopStateRef.current = state;
    setFromPopState(state);
  }, []);

  React.useEffect(() => {
    if (typeof window === 'undefined' || typeof document === 'undefined') {
      return;
    }

    const handlePopState = (event: PopStateEvent) => {
      if (!fromPopState) {
        return;
      }

      // If we made it this far, we know the `popstate` event was caused by the
      // browser
      console.log(
        `location: ${document.location}, state: ${JSON.stringify(event.state)}`
      );
    };

    window.addEventListener('popstate', handlePopState);

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

  const updateInAppNavigation = React.useCallback(
    (op: NavigationOps, params?: { path?: string; routes?: string[] }) => {
      handleFromPopState(false);

      // Do some custom logic here, e.g. updating an in-app navigation history stack
      }
    }
  );

  React.useEffect(() => {
    handleFromPopState(true);
  }, [handleFromPopState, inAppNavigation]);

[abaracedo]

how do you make it work? I've tried the simple solution, just detecting for browser's back, and the popstate event when triggers navigates to the previous page :/

[Abd-Alwahab]

Any update on this @leerob?

[rawatmanoj]

Any update on this?

[jeanvcastro]

Any update on this?

[seblondono]

Here only to add some information I found while researching a way to achieve this in Next.

React Router has a hook useBlocker that has the functionality we want here. In their decision document, they make a very detailed explanation of why this is hard to do, is not consistent across browsers and it is also probably not the best UX when used to stop navigation for an incomplete form state (although in some specific cases, it makes sense)

To my understanding, implementing something like this in Next would require tapping into the router internals. A big effort for what is, IMO, a small UX improvement (if any). Their implementation of useBlocker accesses their route state context.

Since my use case is the incomplete form, I will follow their suggestion and persist the state in session storage, rather than blocking that page navigation. IMO, better UX and small tech effort.

Hope this helps :)

[SantyLorenzo]

Updates?

[dragos99]

We need this to provide a better UX...