Quiero que mi aplicación vaya a la parte superior de la página cuando se haga clic en otra página dentro del sitio. He usado el código de: https://v5.reactrouter.com/web/guides/scroll-restoration y lo puse en un archivo separado.
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; }Lo que he probado:
He colocado <ScrollToTop /> antes de <Switch /> y después de <BrowserRouter /> como en los documentos (estos están en archivos separados).
A diferencia de los documentos, <App /> en mi aplicación está en un archivo separado, por lo que <ScrollToTop /> no se coloca cerca de él.
Cuando hago console.log, veo que se golpea en la instancia correcta (cuando hay un cambio de página), pero no ocurre nada. También revisé muchas publicaciones de stackoverflow sobre el mismo problema, pero no pude incorporar sus sugerencias.
Cuáles son los posibles problemas:
Llamar a window.scrollTo(0, 0) fuera de la función no parece funcionar. ¿Existen alternativas a esta función?
¿La ubicación de <ScrollToTop /> incorrecta? ¿Tiene que llamarse cerca de la <App /> ?
Bienvenido a Stackoverflow @user19251203
Ya has recorrido la mitad del camino. Realmente no necesita crear un componente para ello. Puede crear un enlace personalizado y colocarlo en su <App /> y luego llamarlo:
function App() { // Scroll to top on every transition custom hook const useScrollToTop = () => { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); }; useScrollToTop(); return ( <div className="App"> ....... </div> ) }De esta manera, cada vez que vaya a una nueva página, se desplazará a la parte superior de la página.