Add react router with basic layout + home page

src/Client/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.23.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -1060,6 +1061,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.16.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.16.4.tgz",
@@ -3447,6 +3456,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+      "dependencies": {
+        "@remix-run/router": "1.16.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

src/Client/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/Client/src/main.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import { RouterProvider } from 'react-router-dom'
 import './index.css'
+import router from './routes.tsx'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

src/Client/src/pages/HomePage.tsx

@@ -1,5 +1,3 @@
-function App() {
+export default function HomePage() {
   return <p className="text-3xl font-bold underline">Hello world</p>;
 }
-
-export default App;

src/Client/src/pages/Layout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom";
+
+export default function Layout() {
+  return (
+    <div className="bg-black font-mono text-slate-50 min-h-screen antialiased">
+      <div className="flex flex-col min-h-screen mx-auto max-w-screen-2xl fade-in px-4 md:px-12 lg:px-24">
+        <Outlet />
+      </div>
+    </div>
+  );
+}

src/Client/src/routes.tsx

@@ -0,0 +1,13 @@
+import { createBrowserRouter } from "react-router-dom";
+import Layout from "./pages/Layout";
+import HomePage from "./pages/HomePage";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [{ index: true, element: <HomePage /> }],
+  },
+]);
+
+export default router;