Estoy tratando de desplazarme en la parte superior de cada cambio de página con react-router dom v6. El código se desplaza hacia atrás en la parte superior solo en mi página de inicio y no en la página de detalles de mi personaje. He probado muchas soluciones pero no puedo hacer que funcionen. Estoy usando "react-router-dom": "^6.2.2",
Esto es lo que he conseguido hasta ahora:
ScrollToTop.js:
import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop({ children }) { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return children; }Mi aplicación.js
<Router> <ScrollToTop> <Header /> <Routes> <Route path="/" element={<Home />} /> <Route path="/character/:char_id" element={<CharacterDetail />} /> <Route path='*' element={<PageNotFound />} /> </Routes> <Footer /> </ScrollToTop> </Router>También intenté hacer mi componente directamente usando 'window.scrollTo(0, 0);' y desplazándome a una ID en mi useEffect sin éxito. Agradecido por su orientación.
Parece que también puede depender del navegador, algunos navegadores están comenzando a manejar la "restauración de desplazamiento" por sí mismos ( especificaciones ).
import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop({ children }) { const { pathname } = useLocation(); useEffect(() => { const canControlScrollRestoration = 'scrollRestoration' in window.history if (canControlScrollRestoration) { window.history.scrollRestoration = 'manual'; } window.scrollTo(0, 0); }, [pathname]); return children; }Nota adicional : no pasaría niños a este componente, sino que lo renderizaría como un hermano de la aplicación, de esta manera no activaría una nueva renderización cuando cambie la ubicación, a menos que sea necesario:
<Router> <ScrollToTop /> <App /> </Router>