TanStack Router Course – Loaders, Auth & Type-Safe Routes
Curso práctico sobre TanStack Router: configuración, rutas, layouts, carga de datos, autenticación de rutas privadas y gestión de estado con SearchParams.
Recomendado, valoración editorial 4 de 5
verificado 2026-10-19 — sigue siendo gratis en YouTube
Empezar en YouTubeRespuesta rápida
Curso gratis de Programación de nivel intermedio en YouTube (1 h 32 min). Nuestra valoración: 4/5, recomendado. Comprobamos que sigue siendo gratis el 19 de octubre de 2026.
- Veredicto
- 4/5 · Recomendado
- Para quién
- Desarrolladores con experiencia en React que quieren aprender un sistema de enrutado type-safe alternativo a React Router o Next.js
- Nivel
- Intermedio
- Duración
- 1 h 32 min · 26 capítulos
- Precio
- Gratis en YouTube
- Publicado
- 2026
- Plan sugerido
- 3 sem. · 4 h/sem.
- Verificado
- el 19 de octubre de 2026
Nuestro veredicto
Recomendado, valoración editorial 4 de 5Un curso denso y bien estructurado sobre TanStack Router, ideal para desarrolladores de React que quieren dominar un sistema de rutas type-safe con autenticación y carga de datos. Está en inglés y asume base previa de React, pero su organización por capítulos y la actualidad del tema compensan esas limitaciones.
Puntos fuertes
- Estructura muy detallada con 26 capítulos y timestamps claros
- Progresión lógica de lo básico a patrones avanzados como rutas privadas y caché
- Incluye comparación final con alternativas (React Router, Next.js)
- Curso reciente, publicado en 2026, sobre una herramienta en pleno crecimiento
A tener en cuenta
- El curso está en inglés
- No se menciona proyecto final ni ejercicios prácticos, más allá del seguimiento del código
- Asume conocimientos previos de React sin repasarlos
De qué trata
Este curso de 92 minutos y 26 capítulos enseña a usar TanStack Router para la navegación y el enrutado en aplicaciones web modernas. Arranca con la instalación y la arquitectura del árbol de rutas, y avanza por layouts, rutas estáticas y dinámicas, navegación declarativa y programática, y rutas perezosas (lazy) para mejorar el rendimiento.
La segunda mitad se centra en temas más avanzados: carga e integración de datos con una API (JSON-Server), manejo de estados de carga y error, pre-fetching, filtrado con SearchParams, estado global con Router Context, rutas privadas para autenticación, mutaciones y caché, y una comparación final con React Router y Next.js.
- Configuración e instalación de TanStack Router
- Layouts, rutas estáticas y dinámicas
- Carga de datos, pre-fetching y estados de error
- Rutas privadas y autenticación
- SearchParams y Router Context para estado global
Para quién es este curso
- Desarrolladores con experiencia en React que quieren aprender un sistema de enrutado type-safe alternativo a React Router o Next.js
- Quien ya construye SPAs en React y necesita rutas privadas, carga de datos y gestión de estado con TanStack Router
Mejor busca otro si…
- Personas que no conocen React, ya que el curso usa hooks y componentes sin explicarlos desde cero
Antes de empezar
- Conocimientos de React (componentes, hooks como useNavigate)
- Nociones de JavaScript/TypeScript, ya que el router es type-safe
Qué sabrás hacer al terminar
- Instalar y configurar TanStack Router en un proyecto
- Construir layouts anidados y rutas estáticas y dinámicas
- Implementar navegación declarativa y programática
- Cargar datos desde una API con pre-fetching y manejo de errores
- Proteger rutas privadas con lógica de autenticación
- Gestionar estado con SearchParams y Router Context
Estructura del curso
- 01
Introducción y configuración (0:00 - 20:26)
Presentación del proyecto, agenda del curso, por qué usar un router moderno en 2026, instalación inicial y comprensión del árbol de rutas.
- 02
Layouts y rutas básicas (20:26 - 38:33)
Configuración de la ruta raíz, implementación de layouts con Outlet, componentes de layout estáticos, rutas estáticas, navegación con el tag Link y con el hook useNavigate().
- 03
Rutas dinámicas y rendimiento (38:33 - 51:46)
Optimización con rutas lazy, layouts anidados y patrones de enrutado dinámico.
- 04
Carga de datos (51:46 - 1:18:32)
Integración con una API mediante JSON-Server, carga eficiente de datos, manejo de estados de carga y error, pre-fetching para rutas lazy, filtrado avanzado con SearchParams y gestión de estado global con Router Context, incluyendo rutas privadas para seguridad.
- 05
Buenas prácticas y cierre (1:23:59 - final)
Cuándo no usar Router Context, introducción a mutaciones y caché, herramientas de depuración del router, comparación con React Router y Next.js, y pasos siguientes.
Capítulos del vídeo
- 0:00Master TanStack Router: Project Overview
- 3:10Course Agenda & Key Learning Outcomes
- 5:48Why You Need a Modern Router in 2026
- 8:10TanStack Router
- 10:49Setup, Installation & Initial Configuration
- 15:22Understanding the Route Tree Architecture
- 20:26How to Configure the Root Route
- 21:14Implementing Layouts with the Outlet
- 25:32Building Static Layout Components
- 26:58Defining Static Routes & Navigation
- 29:41Declarative Navigation with the Link Tag
- 33:12Programmatic Routing with useNavigate() Hook
Ver los 14 restantes
- 38:33Optimizing Performance with Lazy Routes
- 42:24Nested Layouts & Dynamic Routing Patterns
- 51:46API Integration: Setting up a JSON-Server
- 53:39Efficient Data Loading & Handling
- 58:46Managing Loading & Error States Professionally
- 1:01:57Pre-fetching & Data Loading for Lazy Routes
- 1:04:07Advanced Filtering with SearchParams & State
- 1:14:52Managing Global App State with Router Context
- 1:18:32Security: How to Build a Private Route
- 1:23:59Best Practices: When NOT to use Router Context
- 1:24:31Introduction to Mutation & Caching
- 1:27:44Using the TanStack Router Debugger Tools
- 1:28:30React Router vs. Next.js vs. TanStack Router
- 1:31:47Next Steps: Continuing Your Learning Journey
Plan de estudio sugerido
3 semanas · unas 4 h por semana
- 1.Semana 1: ver desde la introducción hasta la configuración de layouts (0:00-38:33) y replicar la estructura de rutas en un proyecto propio
- 2.Semana 2: trabajar rutas dinámicas, lazy loading y carga de datos con la API de ejemplo (38:33-1:18:32), practicando cada patrón en el código
- 3.Semana 3: completar rutas privadas, mutaciones, caché y la comparación final (1:18:32-final), repasando los conceptos de Router Context
El plan cuenta con tiempo para pausar y practicar, no solo con la duración del vídeo. Si quieres adaptarlo a tu semana, lee cómo montar tu plan de estudio semanal.
Consejos para seguirlo
- Ten un proyecto React ya iniciado para ir replicando cada capítulo en paralelo al vídeo
- Monta el JSON-Server mencionado en el capítulo 51:46 antes de seguir los capítulos de carga de datos
- Detente en el capítulo de rutas privadas (1:18:32) y prueba a proteger tus propias rutas antes de continuar
- Revisa la comparación final (1:28:30) para decidir si TanStack Router encaja en tu stack actual
Antes y después de este curso
- Antes de este cursoReact Course - 10 Hours (freeCodeCamp)Repasa los fundamentos de React que este curso de TanStack Router da por sabidos.
- Antes de este cursoCurso básico de TypeScript - Empieza con este lenguajeAyuda a entender el enrutado type-safe que se usa durante todo el curso.
Cómo lo presenta el autor
Learn how to use TanStack router to implement frontend navigation, enterprise-level authentication, and type-safe state management in 2026. Whether you're comparing it to React Router DOM or Next.js, you'll learn why TanStack is becoming the industry standard for complex web apps.
❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive…
Extracto de la descripción original en YouTube.
Preguntas frecuentes
+¿Necesito saber React para seguir este curso?
Sí, el curso usa hooks y componentes de React (como useNavigate) desde el principio sin explicarlos, por lo que conviene tener experiencia previa con React.
+¿Cuánto dura el curso y cómo está organizado?
Dura 92 minutos y está dividido en 26 capítulos con timestamps, desde la instalación hasta temas avanzados como rutas privadas, mutaciones y caché.
+¿El curso está en español?
No, el curso está en inglés.
+¿Incluye un proyecto práctico?
Los capítulos siguen un proyecto de ejemplo con una API mediante JSON-Server, pero no se menciona un proyecto final propio ni ejercicios adicionales.
Análisis editorial elaborado con ayuda de IA a partir de la descripción, los capítulos y la duración publicados en YouTube, y revisado según nuestro método. El contenido del curso es obra de su autor; si ves algún error, avísanos.
Guías para sacarle partido
Más cursos de Programación
Agentic AI – Complete Course for Beginners
Curso de unas 24 horas para construir sistemas de agentes de IA con LangChain y LangGraph: Pydantic, flujos de trabajo, memoria, RAG y despliegue en AWS y Render.
Aprende Accesibilidad Web paso a paso
Introducción práctica a la accesibilidad web: pautas y leyes, contenido, navegación, diseño e interacción accesibles, relación con el SEO y evaluación de sitios.
Aprende C# para Unity desde CERO en 7 HORAS (Curso Completo)
Curso de C# desde cero aplicado a Unity 6: de variables, métodos y bucles hasta clases, constructores, encapsulación, static y buenas prácticas.
Aprende Godot - Curso completo desde cero
Crea tu primer videojuego 3D en Godot 4 desde cero: escenas, nodos, GDScript, físicas, animaciones, sonido y exportación a .exe.