fix: Refactor Navbar routing for React Router v7

Author: mizlan

website/package-lock.json

@@ -10,7 +10,7 @@
     "react": "^19.1.0",
     "react-apexcharts": "^1.7.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.5.0",
+    "react-router-dom": "^7.5.1",
     "react-scripts": "^5.0.1",
     "react-scroll": "^1.8.1",
     "recharts": "^2.0.8"

website/package.json

@@ -15,31 +15,14 @@ function App() {
   return (
     <div className="app">
       <Router>
-        {/* conditionally render the heading in navbar */}
-        <Routes>
-          {/* render default navbar if URL is empty */}
-          <Route
-            exact
-            path="/"
-            element={
-              <div className="navbar">
-                <Navbar path="/" subtitle={getHeader()} />
-              </div>
-            }
-          ></Route>
-          {/* pass in URL through params if it's not the default URL */}
-          <Route
-            path="/:currentPage"
-            render={(input) => (
-              <div className="navbar">
-                <Navbar
-                  path={"/" + input.match.params.currentPage}
-                  subtitle={getHeader(input.match.params.currentPage)}
-                />
-              </div>
-            )}
-          ></Route>
-        </Routes>
+        <div className="navbar">
+          <Routes>
+            <Route path="/">
+              <Route index element={<Navbar />} />
+              <Route path=":currentPage" element={<Navbar />} />
+            </Route>
+          </Routes>
+        </div>
 
         <Routes>
           <Route exact path="/" element={<LandingPage />} />
@@ -56,21 +39,3 @@ function App() {
 }
 
 export default App;
-
-//function that renders the heading for the navbar from the route parameters
-function getHeader(path) {
-  let subtitle = "A TeachLA Learning Lab!";
-  const pageNames = {
-    aboutUs: "Who's TeachLA?",
-    college: "Case Study #1: College Admissions",
-    facebook: "Case Study #2: Facebook Ads",
-    facialRecognition: "Case Study #3: Facial Recognition",
-    conclusion: "In Conclusion...",
-    resources: "To Learn More...",
-  };
-  //return default dictionary value if path is falsy
-
-  //get the subtitle from our pageNames dictionary if path exists
-  if (path) ({ [path]: subtitle } = pageNames);
-  return subtitle;
-}

website/src/App.js

@@ -1,12 +1,14 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import teachLogo from "../../assets/teachla-logo.svg";
 import navButton from "../../assets/navButton.svg";
 import "../../main.css";
 import "../../index.css";
 import "./navbar.css";
 
 export default function NavBar(props) {
+  const params = useParams();
+
   // dropdownOpen: boolean variable for whether the dropdown menu is open or closed
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
@@ -15,6 +17,11 @@ export default function NavBar(props) {
     setDropdownOpen(!dropdownOpen);
   };
 
+  // on the homepage (/), currentPage is intentionally undefined
+  const currentPage = params.currentPage;
+
+  const subtitle = getHeader(currentPage);
+
   const navSections = [
     {
       path: "/",
@@ -94,9 +101,27 @@ export default function NavBar(props) {
         <Link className="title-link" to="/">
           <h1 className="title">Bias by Us</h1>
         </Link>
-        <h2 className="subtitle">{props.subtitle}</h2>
+        <h2 className="subtitle">{subtitle}</h2>
       </div>
       {dropdownArea()}
     </div>
   );
 }
+
+//function that renders the heading for the navbar from the route parameters
+function getHeader(path) {
+  let subtitle = "A TeachLA Learning Lab!";
+  const pageNames = {
+    aboutUs: "Who's TeachLA?",
+    college: "Case Study #1: College Admissions",
+    facebook: "Case Study #2: Facebook Ads",
+    facialRecognition: "Case Study #3: Facial Recognition",
+    conclusion: "In Conclusion...",
+    resources: "To Learn More...",
+  };
+  //return default dictionary value if path is falsy
+
+  //get the subtitle from our pageNames dictionary if path exists
+  if (path) ({ [path]: subtitle } = pageNames);
+  return subtitle;
+}