Qué es React Router

Punto de partida: nuestro router casero

Hasta ahora hemos hecho algo muy potente:

• Tenemos la URL sincronizada con todos los filtros de la aplicación.
• Hemos creado nuestro propio router en App.jsx con muy pocas líneas.

Esto está genial por dos motivos:

1. Nos obliga a entender cómo funciona el enrutado por debajo.
2. Nos da confianza para no ver React Router como magia negra.

Pero también tiene una pega importante:

ni tú ni yo vamos a hacer un router mejor que el equipo que lleva años manteniendo React Router.

Limitaciones del router que hemos creado

Nuestro router casero funciona, pero tiene muchas cosas pendientes que en una app real vas a necesitar:

Página 404

Ahora mismo no tenemos una ruta para manejar URLs que no existen.

Si el usuario escribe una ruta incorrecta, la experiencia no es la ideal.

Rutas protegidas y autenticación

¿Qué pasa si necesitamos que ciertas páginas solo se vean si el usuario está logueado?

Tendríamos que montar a mano toda la lógica para redirigir, comprobar tokens, etc.

Carga bajo demanda (code splitting)

Nos gustaría cargar algunas rutas solo cuando el usuario las necesita.

Con nuestro router casero tendríamos que combinarlo a mano con lazy, Suspense, etc.

Estrategias de carga de datos y navegación

Cómo y cuándo cargamos los datos asociados a una ruta.

Qué pasa mientras se cargan (loading states), qué pasa si falla (errores), etc.

Todo esto no está resuelto en nuestro router actual, y es precisamente el tipo de problemas que React Router lleva años trabajando.

Qué es React Router

React Router es la biblioteca estándar de enrutado en el ecosistema React.

Algunos datos para ponerla en contexto:

• Más de miles de millones de descargas en npm.
• Decenas de miles de estrellas en GitHub.
• Cientos de contribuidores.
• Millones de proyectos dependen de ella.

Traducción:

no es una librería random, es una pieza crítica en el ecosistema React.

Por qué usar una librería de enrutado en lugar de la nuestra

• Ya ha resuelto la mayoría de problemas que tú aún ni sabes que existen.
• Está pensada para crecer con tu aplicación.
• Se actualiza para soportar nuevas features del navegador y de React.
• Tiene una comunidad enorme, documentación, ejemplos, tutorials, etc.

Nuestro router casero está bien como ejercicio.

React Router está hecho para proyectos de verdad.

Modos de uso de React Router

React Router no es solo un BrowserRouter con un par de rutas.

Tiene varios “modos” de funcionamiento según lo que tu app necesite:

1. Modo framework

Te da un framework completo sobre React.

Incluye:

• Enrutado avanzado.
• Estrategias de renderizado.
• Carga de datos (loaders).
• Actions para mutaciones.
• Navegaciones, formularios mejorados y mucho más.

Está pensado para construir aplicaciones completas usando solo React Router como base.

Es tan grande que literalmente podrías hacer un curso entero solo de esto.

2. Data mode

Se centra en:

• Carga de datos asociada a las rutas.
• Manejo de errores y estados de carga.

Es como un punto intermedio entre el modo framework completo y el router más básico.

3. Modo declarativo (solo rutas)

Este es el que vamos a usar en este módulo:

Nos quedamos con la parte más sencilla y directa:

• Declarar rutas.
• Navegar entre ellas.

Es ideal para:

• Entender bien la base de React Router.
• No mezclar demasiados conceptos a la vez.
• Mejorar nuestro router casero con una API sólida.

Aunque nos quedemos solo con el modo declarativo, ya vamos a ganar un montón de utilidades y mejoras respecto a lo que tenemos ahora.

Qué vamos a conseguir con React Router

A lo largo de las siguientes clases vamos a ir migrando progresivamente de nuestro router casero a React Router.

La idea es que React Router nos permita:

• Mantener la sincronización con la URL que ya tenemos.
• Definir rutas de forma declarativa y más legible.
• Preparar:
  • Página 404.
  • Rutas protegidas.
  • Carga bajo demanda de componentes.
  • Mejor manejo de estados de carga y errores.

Todo ello sin tener que reinventar la rueda.

Objetivos de la clase

En esta clase en concreto queremos que te quedes con:

• Por qué nuestro router casero tiene límites claros.
• Qué problemas reales resuelve React Router en una app de producción.
• Qué modos de uso tiene React Router y cuál vamos a usar en el curso.
• La idea de que React Router no es magia, sino la evolución natural de lo que ya hemos construido.

Cierre y siguiente paso

En resumen:

• Hemos visto las limitaciones de nuestro router casero.
• Hemos conocido React Router como la librería estándar de rutas en React.
• Hemos entendido sus tres modos de uso y por qué nos centramos en el modo declarativo de rutas.

En la próxima clase empezaremos con la parte práctica:

• Instalar React Router.
• Configurar el router principal.
• Y empezar a migrar nuestras rutas actuales para aprovechar todas sus ventajas.