fix router to implement multiple pages

Author: Asylum313

greenscoutjs/package-lock.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-router-dom": "^7.10.1"
+    "react-router-dom": "^7.10.1",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

greenscoutjs/package.json

@@ -1,16 +1,17 @@
-import { Route } from "react-router-dom";
 import "./App.css";
 import Login from "./components/loginpage/Login";
 import Home from "./components/homepage/Home";
+import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
 // import { nanoid } from "nanoid";
 
 function App () {
     return (
-        // <Routes>
-        //     <Route path="/" element={<Login></Login>}/>
-        //     <Route path="/home" element={<Home></Home>}/>
-        // </Routes>
-        <Login></Login>
+        <Router>
+            <Routes>
+                <Route exact path="/" element={<Login/>}/>
+                <Route path="/home" element={<Home/>}/>
+            </Routes>
+        </Router>
     )
 }
 

greenscoutjs/src/App.jsx

@@ -1,8 +1,11 @@
+import { Navigate, useNavigate } from "react-router-dom";
 import "./GuestButton.css"
 
 function GuestButton () {
+    const navigate = useNavigate();
+
     function handleClick() {
-        alert("Logged In As Guest");
+        navigate("/home")
     }
     return (
         <p onClick={handleClick}>Login As Guest</p>

greenscoutjs/src/components/loginpage/loginButton/GuestButton.jsx

@@ -1,8 +1,11 @@
 import "./LoginButton.css"
+import { Navigate, useNavigate } from "react-router-dom";
 
 function LoginButton () {
+    const navigate = useNavigate();
+
     function handleClick() {
-        alert ('hi')
+        navigate("/home")
     }
 
     return (

greenscoutjs/src/components/loginpage/loginButton/LoginButton.jsx

@@ -1,13 +1,10 @@
 import { StrictMode } from "react";
-import { BrowserRouter } from "react-router-dom"
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.jsx";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
-    <BrowserRouter>
-      <App/>
-    </BrowserRouter>
+    <App/>
   </StrictMode>,
 );