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:

👉 Source code of the example application: https://github.com/nilshartmann/tanst...

👉 (somehow related) Typesafe APIs with Java and #TypeScript: https://github.com/nilshartmann/end-t...

👉 TanStack Router: https://github.com/TanStack/router/

👉 My homepage: https://nilshartmann.net

👉 My social media channels: https://nilshartmann.net/follow-me

• #science_technology
• #react
• #tanstack_router
• #suspense
• #tutorial
• #typescript
• #zod