React Router

MySQL_conf_pbx/test1/reactcezenpbx/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.6.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -2936,6 +2937,50 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz",
+      "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz",
+      "integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==",
+      "dependencies": {
+        "react-router": "7.6.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3077,6 +3122,11 @@
         "node": ">= 18"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",

MySQL_conf_pbx/test1/reactcezenpbx/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

MySQL_conf_pbx/test1/reactcezenpbx/src/App.jsx

@@ -5,13 +5,21 @@ import SignInUp from "./components/login-logout/signInup";
 import LandingPage from "./components/landing-page/homePage.jsx";
 import "./App.css";
 
+// routing
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+const router = createBrowserRouter([
+  { path: "/", element: <LandingPage /> },
+  { path: "/open", element: <SignInUp /> },
+]);
+
 function App() {
   const [count, setCount] = useState(0);
 
   return (
     <div className="containment">
-      <LandingPage />
+      <RouterProvider router={router} />
-      <SignInUp />
+      {/* <SignInUp /> */}
     </div>
   );
 }

MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/logIn.jsx

@@ -1,6 +1,11 @@
 import { userLoginAndResp } from "../../http_routs/userHttp";
 
+// react router
+import { useNavigate } from "react-router-dom";
+
 export default function LogIn() {
+  const navTo = useNavigate();
+
   function logInFunction(event) {
     event.preventDefault();
 
@@ -10,6 +15,7 @@ export default function LogIn() {
 
     console.log(data);
     userLoginAndResp(data.user_name, data.password);
+    navTo("/");
   }
 
   return (