feat(frontend): Added React Router (#2061)

* Added React Router

* Moved router import above ./App

---------

Co-authored-by: Chris Mamatas <chrismamatas1@gmail.com>

frontend/package-lock.json

@@ -31,6 +31,7 @@
         "react-icons": "^5.2.1",
         "react-markdown": "^9.0.1",
         "react-redux": "^9.1.2",
+        "react-router-dom": "^6.23.1",
         "react-syntax-highlighter": "^15.5.0",
         "tailwind-merge": "^2.3.0",
         "vite": "^5.2.11",
@@ -4552,6 +4553,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.14.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz",
@@ -13139,6 +13149,38 @@
         }
       }
     },
+    "node_modules/react-router": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.16.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",

frontend/package.json

@@ -30,6 +30,7 @@
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.1.2",
+    "react-router-dom": "^6.23.1",
     "react-syntax-highlighter": "^15.5.0",
     "tailwind-merge": "^2.3.0",
     "vite": "^5.2.11",

frontend/src/index.tsx

@@ -4,11 +4,19 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { Provider } from "react-redux";
 import { NextUIProvider } from "@nextui-org/react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import store from "#/store";
 import "#/i18n";
 
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+  },
+]);
+
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,
 );
@@ -16,7 +24,7 @@ root.render(
   <React.StrictMode>
     <Provider store={store}>
       <NextUIProvider>
-        <App />
+        <RouterProvider router={router} />
       </NextUIProvider>
     </Provider>
   </React.StrictMode>,