Introduction into TanStack Router for React

In this video I give you an introduction into the new #TanStack #Router v1 for #React. It's featuring typesafe routes and links, nested layouts, advanced data loader capabilities, search params as a React State replacement and integration with React Suspense.

00:00:00 Intro
00:01:35 Typesafe Routes and Links
00:07:40 Layout routes
00:10:38 Active Links
00:12:52 Not Found routes
00:14:28 Nested layouts
00:17:35 Dynamic routes (URL params)
00:20:24 Data Loading (with variables)
00:23:56 Data caching and preloading
00:26:16 Router Developer tools
00:28:05 Links with to-Property from route object
00:29:32 Typesafe search params with TypeScript and zod
00:41:30 Fine granular updates with search params as potential state replacement
00:49:38 Search parameters with from- and to-Properties
00:52:20 Prioritizing data in loaders with deferred data
00:55:46 Fallbacks with React Suspense
00:57:30 Links with MatchRoute and React Transitions
01:01:20 Summary

Links:

[gastond]

This was a very great intro (and more) of TanStack Router. Thank you for sharing!

[BoubkerBoulahdid]

Clear explanation with great examples. Thank you!

[tchanos]

Nice examplanation, great video! Thanks alot! :)

[ahmadullahnikzad]

What are the advantages of react tanstack router than react router

[raghavareddy]

please make a video on protected routes and public routes
with signin, signup, 2fa, forgot password and reset password