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?

I would need to catch pressing back button in browser and show modal to alert user, that he has unsaved changes on page. 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 and popstate event is not enough because url change already when alert is shown on popstate.

I was trying to have this on the top of page.tsx to not caching page:

export const dynamic = 'force-dynamic', revalidate = 0

or this in next.config.js:

headers: () => [{
source: '/:path*',
headers: [
{
key: 'Cache-Control',
value: 'no-store, max-age=0',
},
]
}],
output: 'standalone',
generateEtags: false,
but nothing works to me.

So is there any other way to catch pressing prev/next button in browser or to force hard-navigation on pressing prev/next button in browser?

Thank you!