Clase 32 - React Router
#react
#spa
#react-router
Routing
- Concepto de funcionamiento de una SPA (Single Page Application).
- Brinda la capacidad de poder cambiar de vista al navegar en la aplicación.
- Nos permite realizar acciones en base a la ruta actual.
React Router
- Documentación
- Facilita la creación y manejo de aplicaciones dinámicas.
- Permite proteger fácilmente rutas de nuestra aplicación.
- Proporciona componentes de React para gestionar las rutas de nuestra aplicación, como así también hooks que nos brindan utilidades relacionadas al routing.
Modos de uso
Actualmente React Router cuenta con 3 modos de uso
Legacy Mode (Modo Tradicional) - Pre v6.4
Características principales:
- Sintaxis JSX familiar
- **Configuración declarativa
- Simplicidad
- Cliente únicamente
Ventajas:
- ✅ Curva de aprendizaje suave
- ✅ Sintaxis familiar
- ✅ Flexibilidad visual
- ✅ Menos configuración
Desventajas:
- ❌ Sin loaders de datos
- ❌ Sin optimizaciones automáticas
- ❌ Manejo manual de errores
- ❌ Sin invalidación de cache
Cuándo usar:
- Aplicaciones simples o prototipos
- Proyectos educativos o de aprendizaje
- Cuando migras gradualmente desde versiones anteriores
- SPAs pequeñas sin requisitos complejos de datos
Data Router - V6.4+
Características principales:
- Configuración por objetos
- Loaders y Actions
- Manejo de estados
- Prefetching
- Invalidación inteligente
Ventajas:
- ✅ Manejo automático de estados
- ✅ Optimizaciones integradas
- ✅ Invalidación inteligente
- ✅ Mejor UX
- ✅ Separación de responsabilidades
- ✅ Manejo robusto de errores
Desventajas:
- ❌ Curva de aprendizaje
- ❌ Configuración compleja
- ❌ Menos visual
- ❌ Migración
Cuándo usar:
- Aplicaciones con manejo intensivo de datos
- SPAs que requieren optimizaciones de rendimiento
- Proyectos que necesitan UX sofisticada
- Aplicaciones de producción medianas a grandes
Framework Mode - v7+
Características principales:
- File-based routing
- SSR automático
- Optimizaciones full-stack
- Type safety
- Build system
Ventajas:
- ✅ Performance extremo
- ✅ SEO optimizado
- ✅ Developer Experience
- ✅ File-based routing
- ✅ Full-stack
- ✅ Optimizaciones automáticas
Desventajas:
- ❌ Complejidad alta
- ❌ Vendor lock-in
- ❌ Overhead
- ❌ Curva de aprendizaje empinada
Cuándo usar:
- Aplicaciones de producción grandes
- Sitios que requieren SEO óptimo
- Proyectos que necesitan máximo rendimiento
- Equipos que quieren un framework completo
- Aplicaciones con componente servidor significativo