Prevent navigating away form component #66904
Unanswered
carlesandres
asked this question in
App Router
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I've spent a bit of time trying to figure this one out but it seems like a big gap in the App Router documentation.
I want an effect (or hook) to prevent navigation away from a page if there are unsaved changes. Basically, I want to show
confirm(message)
before allowing the navigation.This used to be easy in the Pages Router but I feel no one has given a good answer (with an example) on how to do this with the App Router now that the new router doesn't expose events.
If this can't be done, I'd like to know so I can make the right decisions.
P.S. I know how to prevent navigation away from the app via
beforeunload
, but navigation to another page cannot be prevented neither bybeforeunload
nor by thepopstate
event.EDIT: The
beforeUnload
seems to be triggered for internal navigation away from a page rendered from theapp
directory, but not from a page rendered frompages
directory.Before today, I thought
next/navigation
was backwards compatible with thepages
router, and that I had a path to migrate progressively to theapp
router by replacingnext/router
withnext/navigation
in any components that I need to use in both routers.Now I think there are cases in which I cannot reuse those components, and I need one version of the component for the
app
router and another for thepages
router, since I do need the "old" router events in some cases.It would be great to know how other people are addressing these issues.
Beta Was this translation helpful? Give feedback.
All reactions