Tanstack Router Tutorial - Routing, Lazy Loading, Data Fetching, Params...

Unlock the full potential of your React applications with our comprehensive tutorial on TanStack Router! Whether you're a beginner or looking to enhance your routing strategy, this video guides you through setting up TanStack Router using both file-based and code-based configurations. Learn how to create scalable, type-safe routes, integrate with Vite, leverage lazy loading for optimal performance, and utilize built-in devtools for seamless debugging. By the end of this tutorial, you'll have a solid understanding of why TanStack Router is a game-changer for modern React development. Don't forget to like, subscribe, and hit the bell icon for more in-depth React tutorials!

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Timestamps:
00:00 - Intro to Tanstack Router
00:48 - What is Tanstack Router?
02:12 - Installing Tanstack Router
03:20 - Setting up folder structure
05:07 - Creating root route component
07:30 - Adding navigation links
09:10 - Understanding the Outlet component
12:01 - Lazy loading routes explained
14:00 - Dynamic routing with parameters
17:30 - Fetching data using loaders
20:00 - Error handling in routes
26:00 - Creating a custom 404 page
27:50 - Conclusion and recommendations

#reactjs #tutorial

[nro]

Great tutorial. So user friendly and the intellisense is magical

[-not-found-service]

Terminé de verme el video, me gustó mucho, definitivamente lo usaré

[zachfenton]

Mutto Obrigado mano, this was a fantastic tutorial, got me back to coding after a 7 month pause.

[DiogoScarmagnani]

24:00 You can also use the Route const you already declare in the same file and then write `const data = Route.useLoaderData()` without specify the route (because it's from current Route const).

[ayushshende]

Next video using multiple tanstack tools together, like tanstack router, query and maybe even forms in a vite-react project. Thanks!

[l.u.c.k_]

Great tutorial, you made it look so simple. Thank you

[preyah]

Thank You, We need a tutorial for an advanced JWT authentication and authorization with access and refresh tokens management and best practices

[AlexSmith-msxb]

Great tutorial! Can you make another one and explain how to integrate Tanstack React Router with Tanstack React Query? Pretty please! :D

[Deus-lo-Vuilt]

excelente, sigue asi, me gustan mucho tus tutoriales, estan bastante completos e interesantes

[kshitijtakarkhede]

Hey pedro can you make video about react leaflet, mapbox etc like things 😊

[nk-menw]

thanks, please show authenticated routs next

[gabrielstiffler]

Hi Pedro. I will be honest with you, I am here just to see if I can maybe get ya to help with an issue and maybe a video ideea. I started react back when you made your first react tutorial, which was amazing. Now I had to go back to react after a long break working with Blazor and vuejs and I have a weird issue. Other than tailwind, I tried MUI, Grommit and a few other component libraries and to me, those are absolutelly awefull, compared to what I worked with in Blazor and vuejs. Everywhere I look MUI is supposed to be the best, but the code-part of it looks awefull, on grommit I wanted to throw the monitor down the window.. and some of those have such a weird documentation. This is in my opinion crazy, the way the documentation is created on most. Honestly mui seems that after a learning curve it would be manageable, but for a begginer it looks so weird and unnapealing. What about make a tutorial for your react component library of choice, or one that would be good for beginners

[jonabergamo]

Hey Pedro, nice vídeo! do you heard about tanstack start?

[GERA]

which you prefer?? React router 7 or tanstack query and why?

[oussamahkabalan]

Do you encourage using typescript or JavaScript is alright?

[sandeeppokhrel]

I've been trying to figure this out on my own, but I'm still struggling. What I really wanted to learn from this video is how to handle different layouts for different routes. Specifically, I don’t want the sidebar to appear on the login and register pages, but I do want it on the dashboard.

In Next.js, this can be managed with multiple layouts but how can I achieve something similar using TanStack Router? Can anyone help me out with this?

[-not-found-service]

Solo tengo una pregunta, como seria para usar el lado del servidor o funciones del lado del servidor, o no es posible ? tengo esas dudas, o para eso tendria que usar tanstack start?

[IkramHussainSiyam]

sir please make a video about tanstack start

[AlejandroRL]

bro, ponle el multiple idioma, que pueda hablar en espalo los videos, como el video pasado!

[gildemarbarros]

Mano, pode fazer um tutoras de react query com suspense?