How can I use Framer Motion with React Router?

How can I use Framer Motion with React Router?

You can use Framer Motion to add animations to your routes in React Router by wrapping your route components with motion elements.

Can you show me a code example?

Sure! Here's a simple example:

import { motion } from 'framer-motion';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Page1 = () => <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Page 1</motion.div>;
const Page2 = () => <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Page 2</motion.div>;

const App = () => (
  <Router>
    <Switch>
      <Route path="/page1" component={Page1} />
      <Route path="/page2" component={Page2} />
    </Switch>
  </Router>
);

This will animate the opacity of the pages when navigating.

What if I want to add a transition effect?

You can add transition effects by using the transition prop in your motion components. For example:

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.5 }}
>
  Page 1
</motion.div>

Are there any performance considerations I should be aware of?

Yes, keep an eye on the number of animations running simultaneously and consider using React.memo to optimize re-renders.