Block/Confirm Navigation TO A PAGE | TanStack | Page 1

cerulean escarp Nov 25, 2025, 12:38 PM

#

I'm using file-based-routing and I have a requirement to show a confirmation modal every time a navigation attempt is made TO a specific page (suppose '/users'). The users page should not even load unless user clicks 'proceed' in the modal. If user clicks 'cancel' he should remain where he was (navigation wise).
I tired beforeload / loader functions in the createFileRoute function, but couldn't find the exact setup that would work. Ideas? Thanks

bright rampart Nov 25, 2025, 12:39 PM

#

this? https://tanstack.com/router/latest/docs/framework/react/guide/navigation-blocking

Navigation Blocking | TanStack Router React Docs

Navigation blocking is a way to prevent navigation from happening. This is typical if a user attempts to navigate while they: Have unsaved changes Are in the middle of a form Are in the middle of a pa...

cerulean escarp Nov 25, 2025, 12:58 PM

#

As far as I can tell this helps with navigating AWAY from a page. I need to capture an attempt of navigation TO a page

#Block/Confirm Navigation TO A PAGE