From 61d19d733d6cd71b0cc7cb8acb9cc6566d1708e8 Mon Sep 17 00:00:00 2001
From: cmekeirl <cedric.mekeirle@ugent.be>
Date: Sun, 14 Apr 2024 14:31:26 +0200
Subject: [PATCH] router fix

---
 frontend/src/App.tsx                      | 37 ++++++++++++-----------
 frontend/src/components/Header/Layout.tsx | 15 +++++++++
 2 files changed, 35 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/Header/Layout.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index eb541cd4..6ab48f5d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,27 +1,30 @@
-import { BrowserRouter,Route,Routes } from "react-router-dom";
-import { Header } from "./components/Header/Header";
+import { Route,RouterProvider, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
+import Layout from "./components/Header/Layout";
 import Home from "./pages/home/Home";
 import LanguagePath from "./components/LanguagePath";
 import ProjectView from "./pages/project/projectView/ProjectView";
 
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path="/" element={<Layout />}>
+      <Route index element={<Home />} />
+      <Route path=":lang" element={<LanguagePath/>}>
+        <Route path="home" element={<Home />} />
+        <Route path="project" >
+          <Route path=":projectId" element={<ProjectView />}/>
+        </Route>
+      </Route>
+    </Route>
+  )
+);
+
 /**
  * This component is the main application component that will be rendered by the ReactDOM. 
  * @returns - The main application component
  */
-function App(): JSX.Element {
+export default function App(): React.JSX.Element {
   return (
-    <BrowserRouter>
-      <Header />
-      <Routes>
-        <Route index element={<Home />} />
-        <Route path=":lang" element={<LanguagePath/>}>
-          <Route path="home" element={<Home />} />
-          <Route path="project" >
-            <Route path=":projectId" element={<ProjectView />}/>
-          </Route>
-        </Route>
-      </Routes>
-    </BrowserRouter>
+    <RouterProvider router={router}>
+    </RouterProvider>
   );
-}
-export default App;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/src/components/Header/Layout.tsx b/frontend/src/components/Header/Layout.tsx
new file mode 100644
index 00000000..e63283c8
--- /dev/null
+++ b/frontend/src/components/Header/Layout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import { Header } from "./Header.tsx";
+
+/**
+ * Basic layout component that will be used on all routes.
+ * @returns The Layout component
+ */
+export default function Layout(): JSX.Element {
+  return (
+    <>
+      <Header />
+      <Outlet />
+    </>
+  );
+}
\ No newline at end of file