I am trying to update my react-router-dom to v6, but it seems to be causing issues with framer motions AnimatePresence, specifically the exit transition.
In App.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;
And then in my About/Home components I have:
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 About
The "initial" and "animate" work fine, but exit is ignored, and immedietly jumps to the relevant page (rather than animating out first).
Note: I also have had to downgrade to framer-motion v4, as v5 does not work with Create-react-app.
Any help is appreciated.
You need to provide to Routes the key and location prop like this:
AnimatedRoutes.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>
);
};
And since the component that is calling useLocation must be be wrapped in BrowserRouter:
App.js
function App() {
return (
<BrowserRouter>
<AnimatedRoutes />
</BrowserRouter>
);
}