En mi aplicación React, tengo dos páginas: la página A, la página de inicio y la página B.
En la página B, tengo enlaces que van a la página A en una sección específica.
En la página A: <section id="foo">Foo</section>
En la página B: <a href="/#foo">Go to foo</a>
Cada vez que voy a la página B desde la página A y hago clic en el enlace, la pantalla va a la última posición de desplazamiento y no a la sección.
Traté de desactivar la función de historial de desplazamiento del navegador con:
useEffect(() => { if (history.scrollRestoration) { history.scrollRestoration = 'manual'; } }, []);También intenté agregar una función para ir a la sección deseada:
useEffect(() => { if (window.location.hash) { const anchor = document.querySelector(window.location.hash); anchor.scrollIntoView(); } }, []);Pero ninguna de estas soluciones funciona. Reproduzco el mismo comportamiento en Chrome y Firefox.
Era una característica de Gatsby: anula el comportamiento del historial de desplazamiento predeterminado del navegador. Más información allí https://www.gatsbyjs.com/docs/how-to/routing/scroll-restoration/
Lo arreglé agregando:
// gatsby-browser.js exports.shouldUpdateScroll = ({ routerProps: { location }, getSavedScrollPosition, }) => { return location.href.indexOf("#") > -1 ? false : true; };