Back button not triggering popstate event listener

[lsli8888]

Summary

I'm currently using nextjs 14.2.3 (app router).

I have an item search page which contains a datagrid, with each row a clickable item that when clicked takes you to an item details page. There are numerous search filters in the datagrid and I have a useEffect hook that automatically pushes an updated URL with the query parameters after a change in any of the search filter options. For example, if the user clicks on two options that selects regions AK and AF, the URL becomes something like https://myexample.com/?regions=AK%2CAF. It makes use of window.history.pushState to modify the browser URL. Unfortunately, I cannot use router.push as that causes a full page refresh - and my filter options are in a small side pane that opens and closes. router.push would close the side pane rather than leave it open.

I also have the following code that allows one to press the back button among changes to the filter options and keeps the URL in sync with the data that's shown:

const router = useRouter(); // useRouter imported from next/navigation

useEffect(() => {
    const handlePopState = () => {
      router.push(window.location.href);
    };

    window.addEventListener('popstate', handlePopState);

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

This works well to allow a user to go back and forth in this search page between changes in filter options.

The problem comes when the user clicks on an item in the search list which takes him to the details page, and then clicks on the back button. When this occurs, the user is not taken to the previous search page in the history stack, but rather the initial search page before all the filter options changes are made.

Here's the code snippet that shows the MUI Link component used:

<Link
        href={`/details/${row.id}
        passHref
        onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
          event.preventDefault();
          router.push(
            `/details/${row.id}`
          );
          ...

I intentionally call router.push here so that I keep some of state on the router so that it can help it with the back button. I've also tried replacing router.push with window.history.pushState with the same result.

My details page has a URL slug pattern like so (not sure if it makes a difference):

src/app/details/[id]

The details page also has a similar useEffect hook that adds the event listener to listen to popstate:

const router = useRouter(); // useRouter imported from next/navigation

useEffect(() => {
    const handlePopState = () => {
      router.push(window.location.href);
    };

    window.addEventListener('popstate2', handlePopState);

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

Again, this doesn't work when I press the back button from the details page in an attempt to go back to the latest search page. I can tell the handlePopState function is never called (when I added logs to handlePopState). What am I doing wrong here?

Additional information

No response

Example

No response

[sunnypatell]

The issue occurs because Next.js does not automatically trigger a popstate event when navigating between pages using router.push(), which affects how the back button behaves.

Why popstate Isn't Firing

1. Next.js handles navigation differently from traditional history.pushState()

   • Unlike raw browser history, router.push() does not trigger a popstate event.
   • window.history.pushState() also does not trigger popstate immediately—it's only triggered when the user navigates back or forward.

2. Your handlePopState function might not be needed

   • If the goal is to sync state when navigating back, router.events.on('routeChangeStart') is often more reliable.

Fix: Use router.beforePopState() Instead

Instead of listening for popstate, use Next.js’s router.beforePopState(), which allows interception of back/forward navigation.

Update your search page effect:

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

const router = useRouter();

useEffect(() => {
  router.beforePopState(({ url }) => {
    router.push(url); // Ensures correct navigation behavior
    return false; // Prevents Next.js from handling the event
  });

  return () => {
    router.beforePopState(() => true); // Reset behavior when unmounting
  };
}, [router]);

Alternative Debugging Tips

• Add console.log("Popstate triggered", window.location.href); to confirm whether popstate is actually firing.
• If using router.push(), ensure query parameters are updated properly to avoid stale state.

Conclusion

✔ popstate doesn’t trigger on router.push(), so router.beforePopState() is the correct approach.
✔ For complex history management, use router.events.on('routeChangeStart') instead of window.addEventListener('popstate').
✔ Verify query parameters are stored properly when using back/forward navigation.

This should fix the back button behavior without breaking existing routing logic.

[sunnypatell]

try to use useSearchParams() to detect URL changes, since the back button updates query params properly.

Try this inside your component:

'use client';

import { useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

const MyComponent = () => {
  const searchParams = useSearchParams();

  useEffect(() => {
    console.log('Search params changed:', searchParams.toString());
  }, [searchParams]); // Runs when the back button is pressed

  return <div>Component</div>;
};

This listens for URL changes without needing popstate. If you’re navigating to the details page, make sure router.push() keeps the existing search params:

router.push(/details/${id}?${searchParams.toString()});

That should hopefully fix it.

[lsli8888]

Thanks @sunnypatell. I put the above code in my item search component and modified the router.push with the existing search params to pass into the details page. However, the console.log shows (when I navigate using the back button from my details page - which has the existing search params in the URL - to the search page) the searchParams.toString() to be empty.

[mbganesh]

@sunnypatell Hi, I need a suggestion from you. I'm going to implement something using searchParams, but I also want to check the previous page's path. Where can I get that information?

[sunnypatell]

@mbganesh Next.js documentation for usePathname

[mbganesh]

@sunnypatell Thanks! Is this the only way to handle the browser's back/forward buttons?

[sunnypatell]

@lsli8888 You’re seeing empty searchParams because useSearchParams() doesn’t always re-trigger after navigating back from /details/[id].
Fix: combine useSearchParams() with usePathname() in the same useEffect to detect all route changes.
Also, make sure you preserve query params when pushing to details with:

router.push(`/details/${id}?${searchParams.toString()}`);

[Abolfazl-ghodrati-k]

Hi, did you find any reason why popstate event is not getting triggered in next14?