Next.js Discord

Discord Forum

Add confirmation modal on back/forward/refresh/leave page

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Avatar
Asiatic LionOP
How can i listen for back/forward/refresh/leave events and prevent it with the router from router/navigation in app directory ? I want to have a modal to confirm/decline leaving the page but i couldnt find any resource and couldnt make it with event listeners. Thank u in advance

2 Replies

Avatar
did you mean browser's prev/next buttons(bf cache)?
Avatar
Asiatic LionOP
idk if it is bfcache or [router cache ](https://nextjs.org/docs/app/building-your-application/caching#router-cache), the thing is that router on app directory does not have does not have methods like beforePopState like router on pages directory and also event listeners for beforeunload and popstate with even.preventDefault doesnt work