Estoy tratando de actualizar mi react-router-dom a v6, pero parece estar causando problemas con los movimientos del marco AnimatePresence, específicamente la transición de salida.
En aplicación.js:
import { Routes, Route } from "react-router-dom"; import {AnimatePresence} from "framer-motion"; import Home from "./Components/Home"; import About from "./Components/About"; function App() { return ( <div className="App"> {/* globals such as header will go here */} <AnimatePresence exitBeforeEnter> <Routes> <Route path="/" element={<Home />} /> <Route path="about" element={<About />} /> </Routes> </AnimatePresence> </div> ); } export default App;Y luego en mis componentes Acerca de/Inicio tengo:
import {Link} from "react-router-dom"; import {motion} from "framer-motion"; function About() { const pageMotion = { initial: {opacity: 0, x: 0}, animate: {opacity: 1, x: 50, transition: {duration: 2}}, exit: {opacity: 0, x:0, transition: {duration: 2}} }; return ( <div className="about"> <motion.div initial="initial" animate="animate" exit="exit" variants={pageMotion}>about page</motion.div> <Link to="/">Go to home page</Link> </div> ) } export default AboutEl "inicial" y el "animado" funcionan bien, pero la salida se ignora e inmediatamente salta a la página relevante (en lugar de animar primero).
Nota: También tuve que cambiar a framer-motion v4, ya que v5 no funciona con Create-react-app.
Cualquier ayuda es apreciada.
Debe proporcionar a Routes la key y el accesorio de location de esta manera:
Rutas animadas.js
const AnimatedRoutes = () => { const location = useLocation(); return ( <AnimatePresence exitBeforeEnter> <Routes location={location} key={location.pathname}> <Route path="/" element={<Home />} /> <Route path="about" element={<About />} /> </Routes> </AnimatePresence> ); };Y dado que el componente que llama a useLocation debe estar incluido en BrowserRouter:
Aplicación.js
function App() { return ( <BrowserRouter> <AnimatedRoutes /> </BrowserRouter> ); }