Restauración del desplazamiento y rutas no encontradas
Restaure el desplazamiento al volver a navegar y muestre un 404 amigable para las rutas desconocidas; mantenga una experiencia fluida en móviles.
Restauración del desplazamiento y rutas no encontradas es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 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.
Por qué restaurar el desplazamiento y usar 404
Objetivo: Mantener una navegación natural.
- Restaurar el desplazamiento al volver atrás
- Página 404 para las rutas desconocidas
- Demostración sencilla sin librerías
Conceptos principales
- Guardar scrollTop por ruta antes de salir
- Al montar, leer la posición anterior y usar scrollTo
- Detectar las rutas no coincidentes y mostrar una pantalla clara de página no encontrada
Demostración: estructura de un router pequeño
Un estado de router pequeño y tres rutas; a continuación añadiremos la restauración del desplazamiento.
<div id="root"></div>Demostración: restauración del desplazamiento
Guardar scrollTop por ruta y restaurarlo al montar la siguiente vista para conseguir una experiencia natural al volver atrás.
<div id="root"></div>Demostración: ruta de página no encontrada
Añadir una pantalla NotFound para las rutas desconocidas y ofrecer un botón para ir a Home.
<div id="root"></div>Consejos y errores comunes
- Guardar el desplazamiento por clave de ruta
- Restaurarlo al montar, antes de realizar tareas costosas
- Incluir siempre una pantalla NotFound con una forma clara de volver
Comprobación de la restauración del desplazamiento
Resumen
Resumen: Almacenar en caché scrollTop por ruta y restaurarlo para que la navegación hacia atrás parezca nativa. Añadir una página 404 clara y amigable que guíe a los usuarios de vuelta a un lugar seguro.
Preguntas frecuentes
¿La lección «Restauración del desplazamiento y rutas no encontradas» es gratis?
Sí — el texto completo de «Restauración del desplazamiento y rutas no encontradas» 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 «Restauración del desplazamiento y rutas no encontradas»?
Restaure el desplazamiento al volver a navegar y muestre un 404 amigable para las rutas desconocidas; mantenga una experiencia fluida en móviles. 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 3 de 3.
¿Cuánto tiempo toma la lección «Restauración del desplazamiento y rutas no encontradas»?
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
- Layouts anidados, loaders (concepto) y precarga
- Flujos de autenticación y rutas protegidas
- Restauración del desplazamiento y rutas no encontradas