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

export function AnimatedRoutes(props: {}) {
    const location = useLocation();
    
    return (
    <AnimatePresence>
        <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 function App(props: {}) {
    /* HashRouter or BrowserRouter */
    return (<div>
        <HashRouter> 
            <AnimatedRoutes />
        </HashRouter>
    </div>)
}