Framer motion AnimatedRoutes

AnimatedRoutes

Reference 
https://github.com/oyedeletemitope/page-transition-in-react-using-framer-motion/blob/master/src/App.js#L5

import React from "react";
import { Routes, Route, useLocation } from "react-router-dom";
import Home from "./Home";
import Contact from "./Contact";
import About from "./About";
import { AnimatePresence } from "framer-motion";
function AnimatedRoutes() {
  const location = useLocation();
  return (
    <AnimatePresence exitBeforeEnter>
      <Routes key={location.pathname} location={location}>
        <Route path="/" element={<Home />} />
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </AnimatePresence>
  );
}

export default AnimatedRoutes;


App.js
import { BrowserRouter as Router } from "react-router-dom";

import Navbar from "./pages/Navbar";
import AnimatedRoutes from "./pages/AnimatedRoutes";

function App() {
  return (
    <Router>
      <Navbar />
      <AnimatedRoutes />
    </Router>
  );
}

export default App;