Tengo una aplicación de reacción y estoy luchando para eliminar la scroll-position la página anterior.

Por favor, le agradecería que entendiera mi problema antes de concluir.

No quiero conservar el scroll history . Quiero que siempre vuelva a la parte superior de la página.

He usado la solución a continuación para hacer que la aplicación se desplace hacia atrás a la parte superior de la página cada vez que un usuario navega a una nueva página.

 import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; const ScrollToTop = ({ children }) => { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return children || null; }; export default ScrollToTop;

El código anterior funciona muy bien sin problemas. Lo que no me funciona es:

Cuando un usuario hace clic en un Button que creé usando Link de react-router-dom , navega a la nueva página (página correcta), pero la scroll-position es de la página anterior (la página de la que proviene).

He intentado usar estos ganchos.

• useLayoutEffect
• withRouter (se elimina de react-router v6)
• useHistory (se elimina de react-router v6
• useNavigate

No están trabajando.

¿Cómo puedo resolver esto? ¿O hay algo que me estoy perdiendo?

También he intentado implementar la solución a continuación. Pero no funcionará.

 import { useEffect } from 'react'; import { withRouter } from 'react-router-dom'; function ScrollToTop({ history }) { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); } }, []); return (null); } export default withRouter(ScrollToTop);