🔍 Add react Router

client/package.json

@@ -15,7 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.2",
-    "react-router-dom": "^6.20.1",
+    "react-router-dom": "^6.21.0",
     "sass": "^1.69.5"
   },
   "devDependencies": {

client/src/App.jsx

@@ -3,18 +3,13 @@ import "./theme.scss";
 // Global Style (includes normalize.css)
 import "./assets/styles/global/global.scss";
 
+// Import Routes
+import Routes from "./routes";
+
 function App() {
   return (
     <>
-      <h1>ما لا يدرك كله لا يترك جله</h1>
-      <h2>ما لا يدرك كله لا يترك جله</h2>
-      <h3>ما لا يدرك كله لا يترك جله</h3>
-      <h4>ما لا يدرك كله لا يترك جله</h4>
-      <h5>ما لا يدرك كله لا يترك جله</h5>
-      <h6>ما لا يدرك كله لا يترك جله</h6>
-      <p>ما لا يدرك كله لا يترك جله</p>
-      <a href="#1">ما لا يدرك كله لا يترك جله</a>
-      <p className="small">ما لا يدرك كله لا يترك جله</p>
+      <Routes />
     </>
   );
 }

client/src/components/testing/testTypo.jsx

@@ -0,0 +1,15 @@
+export default function TestTypo() {
+  return (
+    <>
+      <h1>ما لا يدرك كله لا يترك جله</h1>
+      <h2>ما لا يدرك كله لا يترك جله</h2>
+      <h3>ما لا يدرك كله لا يترك جله</h3>
+      <h4>ما لا يدرك كله لا يترك جله</h4>
+      <h5>ما لا يدرك كله لا يترك جله</h5>
+      <h6>ما لا يدرك كله لا يترك جله</h6>
+      <p>ما لا يدرك كله لا يترك جله</p>
+      <a href="#1">ما لا يدرك كله لا يترك جله</a>
+      <p className="small">ما لا يدرك كله لا يترك جله</p>
+    </>
+  );
+}

client/src/routes.jsx

@@ -0,0 +1,31 @@
+// routes.jsx is the main router for the application
+// Will have the routes in it
+import {
+  BrowserRouter as Router,
+  Routes as Switch,
+  Route,
+} from "react-router-dom";
+
+// Import modules/pages under this line
+
+// Import Testing Routes here
+import TestTypo from "./components/testing/testTypo";
+
+function Routes() {
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/" element={<h1>Landing</h1>} />
+
+        {/* Testing Routes */}
+        {/* FIXME: Delete test routes Later */}
+        <Route path="/testTypo" element={<TestTypo />} />
+
+        {/* Not Found */}
+        <Route path="*" element={<h1>Not Found</h1>} />
+      </Switch>
+    </Router>
+  );
+}
+
+export default Routes;