Conceptos del enrutamiento en el cliente
Aprenda los conceptos del enrutamiento SPA: las rutas se corresponden con vistas y la navegación actualiza la URL y la UI sin una recarga completa; cree una demostración sencilla basada en hash.
Conceptos del enrutamiento en el cliente es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 3 lecciones en total.
¿Qué es el enrutamiento del lado del cliente?
Objetivo: observe cómo el enrutamiento del lado del cliente permite a las aplicaciones cambiar de pantalla sin recargar la página.
- SPA frente a recarga completa de la página
- Asignación de rutas a vistas
- Actualizaciones del historial
SPA frente a MPA
SPA: una sola página HTML en la que JavaScript intercambia las vistas. MPA: el servidor envía una página nueva para cada URL. Las SPA parecen más rápidas porque la navegación evita las recargas completas.
Rutas, parámetros y estado activo
Ruta identifica una vista (por ejemplo, /about). Los parámetros contienen datos (por ejemplo, /users/42). Marque el enlace actual como activo para facilitar la comprensión.
Demo: enrutamiento sencillo
Un pequeño enrutador basado en hash: los enlaces actualizan #path; la aplicación escucha hashchange y renderiza la vista correspondiente.
<div id="root"></div>
Historial y navegación
Los enrutadores actualizan la URL y el historial para que funcionen los botones Atrás y Adelante. Las vistas cambian al instante sin recargar todo el documento.
Consejos y próximos pasos
Consejos:
- Mantenga los enlaces claramente activos.
- Gestione las rutas desconocidas (404).
- Más adelante, utilice una biblioteca para las rutas anidadas y los parámetros.
Comprobación del concepto de enrutamiento
Repaso
Repaso: el enrutamiento del lado del cliente asigna rutas a vistas, actualiza la URL y el historial y evita las recargas completas para ofrecer una navegación rápida.
Preguntas frecuentes
¿La lección «Conceptos del enrutamiento en el cliente» es gratis?
Sí — el texto completo de «Conceptos del enrutamiento en el cliente» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Conceptos del enrutamiento en el cliente»?
Aprenda los conceptos del enrutamiento SPA: las rutas se corresponden con vistas y la navegación actualiza la URL y la UI sin una recarga completa; cree una demostración sencilla basada en hash. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.
¿Cuánto tiempo toma la lección «Conceptos del enrutamiento en el cliente»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Conceptos del enrutamiento en el cliente
- Rutas anidadas y parámetros de ruta
- Enlaces de navegación y estados activos