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

[the-harsh-side]

Any Updates?

[leerob]

Hey everyone, I wanted to share one solution that might be relevant for you all. I saw a few comments in here related to handing popstate and the browser back button, so figured I'd write this up.

Here was my use case:

• I needed to animate between different routes, from / to an individual product page
• The URL should update when changing routes, and both clicking back in the navbar and the browser back button need to work
• Reloading the page on the product detail page /p/[slug] needs to correctly start on the detail state (no animation)

I can definitely empathize with this being confusing, and apologize we haven't done enough to create examples or show how this could be possible. For example, trying to animate across routes using framer-motion (now motion) using the default page files in the App Router won't work exactly – you can't use the layoutId to transition the element. You might think – okay, maybe I need to use intercepted routes for a modal-like pattern, but that also isn't the right solution here.

The solution I landed on is this:

• I'm using motion to animate between my two different "states" in the app (grid of products, product detail page)
• When clicking on a product, we start the animation but also shallow update the URL with window.history.pushState
• We add a useEffect to listen to the popstate event to handle the browser back action
• We have a /p/[slug]/page.tsx route, which has the detail page, to handle direct linking or reloads post-animation

This isn't perfect – for example, if you manually swipe back in iOS Safari. The most ideal solution here is View Transitions, which you can use https://next-view-transitions.vercel.app for in some cases. However, I couldn't get it working perfectly for the animation I was going for in this case, and also there isn't Firefox support yet for View Transitions. I do believe this is the best solution in the future though.

• Code: https://github.com/leerob/next-minimal-store
• Demo: https://nextzy.vercel.app/

CleanShot.2024-12-29.at.14.56.21.mp4

Hope this helps! 🙏

(x-post)

[zeeshanahmad99]

@leerob github link is not working

[centdix]

My use case was really similar to the author of this discussion, I wanted my modal to close when the user presses the back button of its browser, instead of navigating to the previous page (was for better UX on mobile mainly). Here is how I did it:

  // Handle browser back button
  useEffect(() => {
    if (!open) return;

    // Push a new entry to the history with anchor indicating modal is open
    try {
      router.push("#modal", { scroll: false });

      // Handler for popstate (when user presses back, close the modal)
      const handlePopState = () => {
        handleOnClose();
      };

      window.addEventListener("popstate", handlePopState);

      return () => {
        window.removeEventListener("popstate", handlePopState);
        // When the modal component is removed, do a go back to remove the "artificially" pushed history entry
        if (window.location.hash === "#modal") {
             router.back();
        } 
      };
    } catch (error) {
      console.error("Error handling browser back button:", error);
    }
  }, [open, handleOnClose]);

[Caveman-Dan]

Thanks for this it's exactly what I was looking for. There is one tiny problem with it: If a user shares the url along with the #modal hash, opening and closing the modal will result in router.back() being called without #modal being in the history so the browser will navigate off the page.

Not a big issue though, I can live with it, just thought it might be worth pointing it out.