TanStack Router: Block navigation with unsaved changes

"You have un saved changes, are you sure you want to leave?" ⚠️ TanStack Router has a hook to conditionally block navigation, let's give it a look! This can be really useful if your user has partially filled a form without submitting it and you want to make sure data is saved before leaving. You can either use the browser window.confirm to signal the disruptive action, or use a custom UI seamlessly integrated in your app. I'm showing both in the video 👇 Source code: https://github.com/Balastrong/tanstack-router-demo/tree/07-navigation-blocking _______________________________ Support my work: https://github.com/sponsors/Balastrong Hit like and subscribe for more content! :D Beginner-Friendly Open Source Projects: https://github.com/DevLeonardoCommunity Join the Discord community! Here's the invite: https://discord.gg/bqwyEa6We6 You can also follow me on the other platforms: Twitter: https://twitter.com/Balastrong dev.to: https://dev.to/balastrong GitHub: https://github.com/Balastrong Home: https://leonardomontini.dev/ TikTok: https://www.tiktok.com/@balastrong Instagram: https://www.instagram.com/devbalastrong/ _______________________________ TIMESTAMPS 00:00 Demo 00:11 Browser Blocking 01:43 Decide if browser or custom 02:08 Custom UI Blocker 03:32 Modal Blocker