Uploaded April 2024 | Updated September 2026, 3 weeks ago

---

TanStack Router lets you define your routes in two different ways, file-based (similar to nextjs) or code-based (similar to react-router).

Using the code-based approach, let's setup a project and implement navigation, path parameters, query parameters and authenticated routes.

Source code: github.com/Balastrong/tanstack-router-code-based-demo
_______________________________
Hit like and subscribe for more content! :D

Beginner-Friendly Open Source Projects: github.com/DevLeonardoCommunity
Join the Discord community! Here's the invite: discord.gg/bqwyEa6We6

You can also follow me on the other platforms:
Twitter: twitter.com/Balastrong
dev.to: dev.to/balastrong
Home: https://leonardomontini.dev/
TikTok: tiktok.com/@balastrong
GitHub: github.com/Balastrong
Instagram: instagram.com/devbalastrong
_______________________________
TIMESTAMPS

00:00 Intro
00:17 TanStack Router Setup
03:16 Navigation
03:58 Path Parameters
05:52 Load data from Path Parameters
06:54 Navigation to Path Parameters
07:14 Query Parameters
09:09 Authenticated Routes
11:14 File Based vs Code Based
13:34 More on File Based

#tanstack #router #reactrouter