TanStack Router: React Route/Location Masking

Опубликовано: 06 Август 2024
на канале: Dev Leonardo

1,995

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/tanstac...

Chapter 3: Query Params:    • TanStack Router: Query Parameters & V...
Chapter 6: Code Based:    • TanStack Router: Code Based Routing

_______________________________
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:   / discord

You can also follow me on the other platforms:
Twitter:   / balastrong
dev.to: https://dev.to/balastrong
GitHub: https://github.com/Balastrong
Home: https://leonardomontini.dev/
TikTok:   / balastrong
Instagram:   / 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