Cuando una aplicación React deja de caber en una sola página, React Router se vuelve casi inevitable. Esta guía explica cuándo necesitas navegación, qué prerequisitos dominar y cómo aprovechar React Router DOM 6 para separar responsabilidades, mejorar la experiencia de usuario y construir flujos reales como autenticación o rutas dinámicas.

¿Cuándo conviene aprender React Router?

El momento ideal llega cuando ya manejas las bases de React y tu aplicación empieza a crecer en complejidad. No es una herramienta para principiantes absolutos, sino para quien ya entiende cómo se comunican los componentes entre sí.

¿Qué prerequisitos necesitas dominar antes?

Antes de entrar a React Router, conviene tener tres frentes cubiertos [2:08]:

• Fundamentos de React: qué es un componente, props, estados, React Context y React Portals.
• Patrones de composición y render: React Hooks, Render Props y Higher Order Functions.
• Manejo profesional del estado, incluyendo useReducer, porque las apps que usan rutas suelen ser lo bastante grandes como para necesitarlo.

¿Por qué importa conocer portales antes de usar React Router? Porque muchos modales construidos con portales pueden reemplazarse por una ruta nueva. Si entiendes ambos, eliges mejor cuándo usar cada uno.

¿Por qué este curso usa la versión 6 y no la más nueva?

Existen varias versiones de React Router en circulación, desde la 3 hasta la 7. Trabajar con la versión 6 te da una base estable y transferible: todas las versiones siguen una estructura parecida, así que después puedes hacer upgrade o downgrade sin perderte [5:47].

¿Qué problema resuelve la navegación en una app React?

Una single page application puede vivir en una sola URL mientras sea pequeña. Pero cuando aparecen muchas vistas que dependen de estados distintos, mantener todo en una sola página se vuelve un caos de condicionales y portales.

Piensa en Platzi: tiene /blog, /cursos, /notificaciones y rutas dinámicas como /clases/algo, donde el componente es el mismo pero el contenido cambia según un parámetro. Sin rutas, sería imposible compartir una clase específica con un link.

¿Qué ventajas trae usar rutas en lugar de modales?

La navegación aporta beneficios concretos tanto para quien usa la app como para quien la desarrolla:

• Shareability: cada vista tiene su propia URL, fácil de copiar y compartir.
• Separación de responsabilidades: cada ruta agrupa los componentes que cumplen un mismo objetivo.
• Menos portales y condicionales manuales: en cerca del 90% de los casos, un modal puede reemplazarse por una ruta nueva.

¿Cuándo reemplazar un modal por una ruta? Cuando el contenido del modal merece ser compartible, recargable o profundo en lógica. Si es algo efímero como un confirm, el modal sigue siendo válido.

¿Qué vas a construir con React Router DOM 6?

El recorrido del curso parte de los fundamentos de navegación y termina aplicándolos a un proyecto real. Vas a tocar conceptos, custom hooks y la API completa de la librería.

¿Cómo se aplica React Router a un flujo de autenticación?

Uno de los módulos construye un flujo de fake authentication: no se conecta a OAuth ni a un backend real, pero sí resuelve los problemas típicos de UX cuando un usuario inicia sesión.

Entre los detalles que cubrirás están:

• Ocultar el botón de login cuando el usuario ya está autenticado.
• Redirigir a /login si alguien intenta entrar a una página privada como el perfil.
• Manejar logout y permisos básicos por roles, como administrador o editor.

¿Cómo migrar Todo Machine de modales a rutas?

Después del módulo de autenticación, Todo Machine recibe React Router DOM 6. La aplicación, que hasta ahora usaba portales y modales para crear tareas, se transforma en un sistema con páginas dedicadas para crear y editar todos.

Esto introduce un reto interesante: compartir información entre rutas. Si navegas desde la lista al editor, puedes pasar el estado directamente; pero si alguien llega a la URL de edición de forma directa, hay que recuperar esa información desde otra fuente.

¿Qué retos avanzados te esperan?

El cierre del curso incluye el deploy a GitHub Pages, que da problemas específicos cuando hay rutas, y una serie de retos pensados para que practiques sin live coding.

Estos desafíos no se resuelven en pantalla. La idea es que intentes resolverlos por tu cuenta, falles, vuelvas a intentar y compartas tu proceso en los comentarios. Esa práctica deliberada es la que convierte el conocimiento en habilidad real.

Cuéntame en los comentarios qué tipo de aplicación piensas migrar a React Router y qué duda tienes sobre la navegación en React.