Various repairs to the About page

src/App.js

@@ -1,38 +1,27 @@
-import { FirebaseConfig } from "./config/Config";
-import { initializeApp } from "firebase/app";
-import {Routes, Route} from "react-router-dom";
-
-import { Header } from "./components/Header";
-import './App.css';
-import { About } from "./pages/About";
-import { Home } from "./pages/Home";
-import { Contact } from "./pages/Contact";
-import Container from "react-bootstrap/Container";
-import { Nav, Navbar } from "react-bootstrap/esm";
+import { FirebaseConfig } from "./config/Config"
+import { initializeApp } from "firebase/app"
+import { Routes, Route } from "react-router-dom"
 
+import { Header } from "./components/Header"
+import './App.css'
+import { About } from "./pages/About"
+import { Home } from "./pages/Home"
+import { Contact } from "./pages/Contact"
 
 function App() {
-  const FBapp = initializeApp(FirebaseConfig);
+  const FBapp = initializeApp(FirebaseConfig)
+  const saySomething = ( word ) => {
+    alert( word )
+  }
   return (
     <div className="App">
-      <Navbar>
-        <Container>
-          <Navbar.Brand>App</Navbar.Brand>
-          <Nav>
-            <Nav.Link href="/">Home</Nav.Link>
-            <Nav.Link href="/about">About</Nav.Link>
-            <Nav.Link href="/contact">Contact</Nav.Link>
-            </Nav>
-        </Container>
-      </Navbar>
+      <Header />
       <Routes>
-        <Route path="/" element={ <Home greeting="Hey you, you're at home!" /> } />
-        <Route path="/about" element={ <About greeting="Hey you, this is about page!" /> } />
-        <Route path="/contact" element={ <About greeting="Hey you, this is contact page!" /> } />
+        <Route path="/" element={ <Home greeting="Hey you're at home!" /> } />
+        <Route path="/about" element={ <About greeting="Hey you, this is about page!" handler={saySomething} /> } />
+        <Route path="/contact" element={ <Contact /> } />
       </Routes>
     </div>
   );
-  }
-
-
+}
 export default App;

src/pages/About.js

@@ -1,3 +1,8 @@
 export function About ( props ) {
-    return ( <h1>{props.greeting} </h1>)
-}
+    return ( 
+    <div>
+      <h1>{ props.greeting }</h1>
+      <button onClick={ () => props.handler("I've been clicked!") } >Click me</button>
+    </div>
+    )
+  }