rewraping app with framer motion

src/App.js

@@ -2,46 +2,28 @@ import "./assets/css/App.scss";
 import Home from "./pages/Home.jsx";
 import Single from "./pages/Single.jsx";
 import Profile from "./pages/Profile.jsx";
+import Country from "./pages/Country.jsx";
 import Results from "./pages/Results.jsx";
 import Test from "./pages/Test.jsx";
-
+import { v4 as uuidv4 } from "uuid";
 import Game from "./pages/Game.jsx";
 
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { useLocation, Routes, Route } from "react-router-dom";
-
+import { AnimatePresence } from "framer-motion";
-const router = createBrowserRouter([
-	{
-		path: "/",
-		element: <Home />,
-	},
-	{
-		path: "/select-profile",
-		element: <Profile />,
-	},
-	{
-		path: "/play",
-		element: <Game />,
-	},
-	{
-		path: "/results",
-		element: <Results />,
-	},
-	{
-		path: "/article/:id",
-		element: <Single />,
-	},
-	{
-		path: "/test",
-		element: <Test />,
-	},
-]);
 
 function App() {
+	const location = useLocation();
 	return (
-		<>
+		<AnimatePresence mode='wait'>
-			{/* <button onClick={changeLanguage}>Change language</button> */}
+			<Routes location={location} key={location.pathname}>
-			<RouterProvider router={router} />;
+				<Route path='/' element={<Home />} />
-		</>
+				<Route path='/select-profile' element={<Profile />} />
+				<Route path='/select-country' element={<Country />} />
+				<Route path='/play' element={<Game />} />
+				<Route path='/results' element={<Results />} />
+				<Route path='/test' element={<Test />} />
+			</Routes>
+		</AnimatePresence>
 	);
 }
 

src/index.js

@@ -3,12 +3,19 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import { UserContextProvider } from "./context/UserContext.js";
+import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
+import { AnimatePresence } from "framer-motion";
+import Home from "./pages/Home.jsx";
+import Profile from "./pages/Profile.jsx";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
+
 root.render(
 	<React.StrictMode>
 		<UserContextProvider>
-			<App />
+			<BrowserRouter>
+				<App />
+			</BrowserRouter>
 		</UserContextProvider>
 	</React.StrictMode>
 );