Feature ticket 138 routing configuration (#142)

Added Navbar to router. Added nested routing. Added pages: - Signup page - Display page --------- Co-authored-by: ravikth <[email protected]> Co-authored-by: Nakul Bhandare <[email protected]>
SE4CPS · Feb 13, 2025 · fe68087 · fe68087
1 parent 07922ba
commit fe68087
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 11 deletions.
diff --git a/frontend/web-app/src/Components/NavBar.tsx b/frontend/web-app/src/Components/NavBar.tsx
@@ -1,8 +1,16 @@
 import React from 'react'
+import { Link, Outlet } from 'react-router-dom';
 
 function NavBar() {
   return (
-    <div>NavBar</div>
+    <div>
+      <div>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+        <Link to="/faq">FAQ</Link>
+      </div>
+      <Outlet />
+    </div>
   )
 };
 

diff --git a/frontend/web-app/src/Components/Router.tsx b/frontend/web-app/src/Components/Router.tsx
@@ -5,6 +5,9 @@ import PlantDetailPage from "../Pages/PlantDetailPage";
 import AboutPage from "../Pages/AboutPage";
 import FaqPage from "../Pages/FaqPage";
 import ErrorPage from "../Pages/ErrorPage";
+import NavBar from "./NavBar";
+import SignUpPage from "../Pages/SignUpPage";
+import DisplayPage from "../Pages/DisplayPage";
 
 const router = createBrowserRouter([
     {
@@ -15,21 +18,35 @@ const router = createBrowserRouter([
         element: <LoginPage/>,
     },
     {
-        path: '/',
-        element: <HomePage/>,
+        path: '/signup',
+        element: <SignUpPage />,
     },
     {
-        path: '/plant_detail',
-        element: <PlantDetailPage/>,
+        path: '/display',
+        element: <DisplayPage />
     },
     {
-        path: '/about',
-        element: <AboutPage />,
+        path: '/',
+        element: <NavBar />,
+        children: [
+            {
+                path: '/',
+                element: <HomePage/>,
+            },
+            {
+                path: '/plant_detail',
+                element: <PlantDetailPage/>,
+            },
+            {
+                path: '/about',
+                element: <AboutPage />,
+            },
+            {
+                path: '/faq',
+                element: <FaqPage />,
+            }
+        ]
     },
-    {
-        path: '/faq',
-        element: <FaqPage />,
-    }
 ]);
 
 function Provider() {

diff --git a/frontend/web-app/src/Pages/DisplayPage.tsx b/frontend/web-app/src/Pages/DisplayPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function DisplayPage() {
+  return (
+    <div>DisplayPage</div>
+  )
+}
+
+export default DisplayPage
diff --git a/frontend/web-app/src/Pages/SignUpPage.tsx b/frontend/web-app/src/Pages/SignUpPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function SignUpPage() {
+  return (
+    <div>SignUpPage</div>
+  )
+}
+
+export default SignUpPage