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 👇

_______________________________

Hit like and subscribe for more content! :D

You can also follow me on the other platforms:
_______________________________
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

[SeanCassiere]

Great video!

When we released the route masking feature back during the beta, we really only considered that Instagram-style dialog-to-page type navigation as its only real production use case. We of course knew about the search param hiding capability, but we never thought that it'd be anything someone would want to do.

Now about 8 months since we went 1.0, with people wanting to put everything in their URL search params, the declarative route masking works so well 😋.

[codewithkin]

Awesome videos Leonardo. Thanks a lot for sharing

[hours-wm]

location masking branch is not containing expected code. can you please update your repo. it's kinda emergency

[ssatriyaa]

how does the location masking work if I use file based routing?