Preventing Navigation on Back Browser Click When Modal is Open

[AnasBoulmane]

Hello Next.js Community,

I've been working with Next.js and have encountered a specific scenario that I'm struggling to find a solution for. I have a modal in my application, and I want to prevent navigation when the back button in the browser is clicked while the modal is open.

Currently, when the modal is open and the user clicks the back button in the browser, the application navigates to the previous page. However, I want the back button click to only close the modal and not navigate away from the current page Achieving Mobile Native-Like Behavior.

I've searched through the issues and discussions here but couldn't find a specific thread that directly addresses this issue. I'm wondering if anyone else has encountered this scenario and how they've handled it.

Here's a brief overview of my current setup:

1- I'm using Next.js App router.
2- The modal is implemented using radix-ui/react-dialog.

the only solution I can think of is using routerbeforepopstate but my app is based on the App router

Has anyone else faced this issue? Any guidance or suggestions would be greatly appreciated. Thank you in advance for your help!

[seblondono]

Next has documentation on how to implement a modal using parallel routes. However, I found that path too complex.

I chose to display the modal by adding a ?modal=search query param to the route. In this way, users can deep-link to the modal "open" state, and back/forward navigation triggers the open state too. All these can be abstracted in a useDialog hook that takes the query param value, in case you have multiple modal types. It returns a isOpen value, and a handleClose function.

Hope this helps :)

[thinhbg2812-2]

Any update guys?