block route changes in app directory
Unanswered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Hi, I need to block the browser navigation with route change and back & forth buttons on browser history.
I am not able to achieve this, is the feature planned?
For now I cannot prevent or warn a user when they accidentally used back navigation while filling a form e.g.
I think this is a very common usecase and cannot understand why the router events are removed.
I am not able to achieve this, is the feature planned?
For now I cannot prevent or warn a user when they accidentally used back navigation while filling a form e.g.
I think this is a very common usecase and cannot understand why the router events are removed.
43 Replies
hmm sounds like a feature next can implement
are you using <Link> or router.push() ?
no wait
have you tried doing it manually like this?
useState(()=>{
// Event listener for the 'beforeunload' event
globalThis.window?.addEventListener('beforeunload', function (e) {
// Check if any of the input fields are filled
if (fname !== '' || lname !== '' || subject !== '') {
// Cancel the event and show alert that
// the unsaved changes would be lost
e.preventDefault();
e.returnValue = '';
}
});
}, [])Asiatic LionOP
it was possible within next/router with Router.events and fairly easy to implement. But without access to the router events i cannot prevent the route change.
already tried to work with popstate event from window but the nextjs route changes are not affected / still processed
already tried to work with popstate event from window but the nextjs route changes are not affected / still processed
@aardani have you tried doing it manually like this?
js
useState(()=>{
// Event listener for the 'beforeunload' event
globalThis.window?.addEventListener('beforeunload', function (e) {
// Check if any of the input fields are filled
if (fname !== '' || lname !== '' || subject !== '') {
// Cancel the event and show alert that
// the unsaved changes would be lost
e.preventDefault();
e.returnValue = '';
}
});
}, [])
Asiatic LionOP
yea but this only covers unload events from browser (nvigate to external url, close or refresh window)
you sure? the article says back button is also affected, bascially anything that would cause unload page
globalThis.window?.onbeforeunload()Asiatic LionOP
i need to intercept / prevent the internal routing when there is browser back & forth, or better route change in general.
I could wrap link and router.push in a wrapper which will do my custom logic, thats okay - but then there is still no back & forth interception.
I could wrap link and router.push in a wrapper which will do my custom logic, thats okay - but then there is still no back & forth interception.
@aardani you sure? the article says back button is also affected, bascially anything that would cause unload page
Asiatic LionOP
yes, let me double check again
Asiatic LionOP
the event is not triggered when in SPA & in same context, since there is no unload happening
damn you are right
maybe you can use
router.replace() in EVERY navigationso that there wont be anything added to the back/forward array haha
Asiatic LionOP
😄
"router.events is not currently supported." https://nextjs.org/docs/app/api-reference/functions/use-router#router-events
yep i saw
Asiatic LionOP
i need a workaround 😦
what about listening to "popstate"
Asiatic LionOP
been there, done that, not working 
ðŸ˜
Asiatic LionOP
const preventForthBackNavigation = (event: PopStateEvent) => {
event.stopPropagation();
event.preventDefault();
if (!window.confirm('test')) {
event.preventDefault();
window.history.pushState(null, document.title, window.location.href);
}
};
window.addEventListener('popstate', preventForthBackNavigation, { capture: true });i think this is a creative try, but does not help, since the routing is still executed by the app router -.-
guess they just listen to location and do their routing no matter what
ok definetly create an issue/discussion in next.js page then maybe someone with more experience knows how to handle this use case
Asiatic LionOP
yes
Asiatic LionOP
looks like...
European sprat
Did you ever figure out a solution for this?
Asiatic LionOP
never 😦 its very frustrating...
I'm in the same boat 😅
Rhinelander
Same here
Dwarf Crocodile
same here 
Japanese cockle
Any updates on this ?
no
Hello.
Any update about this?
Any update about this?
no