Next.js Discord

Discord Forum

Detect user trying to navigate away and show alert

Unanswered
Black carp posted this in #help-forum
Open in Discord
Black carpOP
I'm using the app router and I have a page with a big form that the user needs to fill and if the form is dirty I want to prevent the user from navigating away and losing all progress so I want to somehow listen for the navigation event and when a user tries to navigate away with soft navigation either by router hook or Link component I want to stop the navigation and show a dialog asking them if they're sure and clarifying they're gonna lose all data on the page

3 Replies

Bighead carp
Browsers already have this sort of warning when navigating away, but you have to set up a form such that the browser detects this