Quiero hacer una transición de página fluida con restauración de desplazamiento. He estado tratando de hacer una restauración de desplazamiento con transiciones de página en React pero no puedo hacerlo sin problemas.

 <Navbar /> <AnimatePresence exitBeforeEnter> <ScrollToTop/> <Routes location={location} key={location.pathname}> <Route path="/" element={<Home />}/> <Route path="/about" element={<About />}/> </Routes> </AnimatePresence> <Footer />

En el código anterior, traté de poner ScrollToTop dentro de AnimatePresence para restaurar el desplazamiento mientras la página está en transición. Sin embargo, muestro una advertencia que dice que tengo varios hijos dentro de AnimatePresence, y la transición de la página se comporta de manera extraña, ya que mi pie de página y la barra de navegación parpadean en la página mientras se realiza la transición. Si coloco ScrollToTop fuera de AnimatePresence, primero se desplaza hacia arriba y solo luego comienza la animación, lo que parece no deseado.

Mi archivo ScrollToTop.js, sugerido por react-router:

 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; }

Versiones: "framer-motion": "^6.2.4" y "react-router-dom": "^6.2.1".