Routing updates

src/components/App.js

@@ -20,6 +20,8 @@ import { Helmet } from "react-helmet";
 
 import { format } from "date-fns";
 
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
 const baseurl = process.env.PUBLIC_URL || "";
 
 // convert seconds into H:MM:SS
@@ -33,7 +35,6 @@ function secondsToTime(e) {
     .padStart(2, "0");
 
   return h < 1 ? `${m}:${s}` : `${h}:${m}:${s}`;
-  //return `${h}:${m}:${s}`;
 }
 
 export default function App() {
@@ -48,15 +49,6 @@ export default function App() {
     zoom: 4,
   });
 
-  // console.log("selectedRun:", selectedRun);
-  // console.log("current fetched run:", fetchedRun);
-
-  // console.log("current run promise status: ", loadRunStatus);
-
-  // {
-  //   status: 'idle' | 'loading' | 'succeeded' | 'failed'
-  // }
-
   useEffect(() => {
     if (!selectedRun) return;
     console.log("request run data for:", selectedRun);
@@ -156,7 +148,7 @@ export default function App() {
         <title>Will will run</title>
         <meta name="theme-color" content="#05651b" />
       </Helmet>
-      <HeaderComponent title="Will will run" />
+      <HeaderComponent title={selectedRun} />
       <div className="body-content">
         <div className="runs-block">
           <RunSelector title="Past Runs" />

src/components/site/header.js

@@ -1,18 +1,22 @@
+import { Link } from "react-router-dom";
+
 function HeaderComponent(props) {
   return (
     <header className="header">
-      <h1 className="site-title">{props.title}</h1>
+      <Link className="site-title" to="/">
+        {props.title}
+      </Link>
       <nav>
         <ul className="navigation">
           <li>
-            <a className="nav-item" href="#runs">
+            <Link className="nav-item" to="/">
               Runs
-            </a>
+            </Link>
           </li>
           <li>
-            <a className="nav-item" href="about">
+            <Link className="nav-item" to="/about">
               About
-            </a>
+            </Link>
           </li>
         </ul>
       </nav>

src/index.css

@@ -71,6 +71,8 @@ code {
   margin: 0 1rem;
   color: white;
   font-size: 2rem;
+  font-weight: bold;
+  text-decoration: none;
 }
 
 .navigation {

src/index.js

@@ -6,18 +6,17 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import App from "./components/App";
 import "./index.css";
-import About from "./pages/About/About";
-import NotFound from "./pages/NotFound/NotFound";
+import About from "./pages/About";
+import NotFound from "./pages/NotFound";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
 root.render(
   <React.StrictMode>
-    <BrowserRouter basename={process.env.PUBLIC_URL}>
+    <BrowserRouter basename="">
       <Routes>
         <Route path="/" element={<App />} />
-        {/* * should be the last path in the list */}
-        <Route path="about" element={<About />} />
+        <Route path="/about" element={<About />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
     </BrowserRouter>

src/pages/About.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import HeaderComponent from "../components/site/header";
+
+function About() {
+  return (
+    <div>
+      <HeaderComponent title="Will will run" />
+      <h1>About</h1>
+      <p>This is a website.</p>
+    </div>
+  );
+}
+
+export default About;

src/pages/NotFound.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import HeaderComponent from "../components/site/header";
+
+function NotFound() {
+  return (
+    <div>
+      <HeaderComponent title="Will will run" />
+      <h1>Page not found!</h1>
+      <Link to="/"> Go home</Link>
+    </div>
+  );
+}
+
+export default NotFound;