TanStack Router: React Route/Location Masking

In React, you might want to show a shorter URL to the user, hiding some query params or parts of the URL entirely. Let's talk about route masking with TanStack Router 🎭 It's not a super common practice, but sometimes it helps. Here are a couple of examples: 1)You want to navigate to a page with some parameters already set. You can pass them into query params, but you don't need to show that to the end user in the browser's address bar. Mask them! 2) You open a modal that has its own route, but you want to hide that you're navigating. Mask that URL! TanStack Router offers two separate APIs, one imperative and the other declarative. Let's see them in action 👇 Source code: https://github.com/Balastrong/tanstack-router-demo/tree/08-route-masking Chapter 3: Query Params: https://youtu.be/fE0CeXZF7CY Chapter 6: Code Based: https://youtu.be/HKS9gLHhz2s _______________________________ 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 Route Masking 00:24 Example 1: Hide query parameter 01:46 Imperative Approach 02:56 Keep mask on reload 04:24 Active Route with different query parameters 04:58 Declarative Approach 06:59 Example 2: Hide modal path 08:34 Unmask on page reload 09:30 Router Devtools