Estoy usando el siguiente componente ScrollToTop para desplazarme hasta la parte superior de la página después de navegar a una nueva página con el enrutador de reacción (copiado de algún lugar aquí en SO). Esto funciona según lo previsto.
import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } <ScrollToTop /> se encuentra dentro de mi App.js justo debajo react-helmet y encima de mi componente <Header /> .
Sin embargo, cuando navego a la página actual (por ejemplo, abro el sitio web/acerca de, me desplazo hacia abajo y navego al sitio web/acerca de otra vez), me quedo en la posición actual sin volver a la parte superior. Supongo que este es el caso porque el componente no se vuelve a cargar.
Lo que esperaría/me gustaría que sucediera es que la página se desplaza hacia la parte superior en cada navegación, incluso cuando se navega a la página actual.
¿Cómo puedo conseguir esto?
Muy bien, después de mirar alrededor y jugar un poco más, me topé con esto aquí: stackoverflow: react-router desplácese hacia arriba en cada transición
Descarté esto al principio porque asumí que haría más o menos lo mismo que mi código. Chico, estaba equivocado. Este código hace exactamente lo que estaba buscando.
Solo una cosa: estaba recibiendo un error sobre una dependencia faltante:
React Hook useEffect tiene una dependencia faltante: 'historial'.
Agregar historial a las dependencias solucionó este problema. Aquí el código final, en su mayoría copiado de la publicación vinculada anteriormente:
import { useEffect } from "react"; import { withRouter } from "react-router-dom"; function ScrollToTop({ history }) { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); }; }, [history]); return null; } export default withRouter(ScrollToTop);