upgrading react-router-dom package to latest and utilising new routes structure

Author: barrymun

package-lock.json

@@ -20,7 +20,7 @@
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^7.1.1",
     "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,16 @@
+import { Route, Routes } from "react-router-dom";
+
+import Container from "@components/Container";
+import SnippetList from "@components/SnippetList";
+
+const AppRouter = () => {
+  return (
+    <Routes>
+      <Route element={<Container />}>
+        <Route path="/" element={<SnippetList />} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default AppRouter;

src/appRouter.tsx

@@ -2,15 +2,17 @@ import "@styles/main.css";
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { RouterProvider } from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 
+import AppRouter from "@appRouter";
 import { AppProvider } from "@contexts/AppContext";
-import { router } from "@router";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <AppProvider>
-      <RouterProvider router={router} />
+      <BrowserRouter>
+        <AppRouter />
+      </BrowserRouter>
     </AppProvider>
   </StrictMode>
 );