TanStack Router: Code Based Routing

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.

_______________________________
Hit like and subscribe for more content! :D

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

[sahajdave]

Thank you so much man - I was having a hard time with code based params from the official docs for an hour!

[jlkinley]

Hi buddy. Your tutorials are great. I have learned so much from watching your videos. I was wondering if you could do a video on routes that work with modals and drawers. It seems to me this would require both file-based and code-based routing. I am currently building a project with shadcn and it would be great to be able to have a modal element that has an outlet. So far, I have not been able to figure it out.

[seanZG]

What is the best, file based or code based? What is more powerful?

[DevLeonardo]

What is your favourite way of defining routes? From the files or manually in the code?

[wizze]

Wonderful content
But you didn't show how to make layouts in the code based routing