Basic website structure

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"

src/App.js

@@ -1,25 +1,36 @@
-import logo from './logo.svg';
+import React from "react"
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
 import './App.css';
+import Header from "./Header.js"
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import Home from "./pages/Home"
+import About from "./pages/About"
+import Members from "./pages/Members"
+import Resources from "./pages/Resources"
+
+const App = () => {
+    return (
+        <Router>
+            <Header />
+            <Routes>
+                <Route path="/" element={
+                    <Home />
+                } />
+
+                <Route path="/about" element={
+                    <About />
+                } />
+
+                <Route path="/officers" element={
+                    <Members />
+                } />
+
+                <Route path="/resources" element={
+                    <Resources />
+                } />
+            </Routes>
+        </Router>
+    );
 }
 
 export default App;

src/Header.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+const Header = () => {
+    return (
+        <StyledHeader>
+            TJHSST Quantum Computing Club
+            <Link to="/">Home</Link>
+            <Link to="/about">About</Link>
+            <Link to="/officers">Officers</Link>
+            <Link to="/resources">Resources</Link>
+        </StyledHeader>
+    )
+}
+
+const StyledHeader = styled.div`
+    font-size: 30px;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 40px;
+    margin-left: 80px;
+    margin-right: 80px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    background: lightskyblue;
+`
+
+export default Header;

src/index.css

@@ -10,16 +10,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
-
-.heading {
-  font-size: 30px;
-  font-weight: bold;
-  text-align: center;
-  margin-top: 40px;
-  margin-left: 80px;
-  margin-right: 80px;
-  padding-top: 15px;
-  padding-bottom: 15px;
-  background: lightskyblue;
-}
+}

src/index.js

@@ -1,22 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-// import App from './App';
+import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-class Heading extends React.Component {
-  render() {
-    return (
-      <div className = "heading">
-        TJHSST Quantum Computing Club
-      </div>
-    )
-  }
-}
-
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <Heading />
+    <App />
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/About.js

@@ -0,0 +1,11 @@
+import React from "react"
+
+const About = () => {
+    return (
+        <div>
+            About
+        </div>
+    )
+}
+
+export default About

src/pages/Home.js

@@ -0,0 +1,11 @@
+import React from "react"
+
+const Home = () => {
+    return (
+        <div>
+            Home
+        </div>
+    )
+}
+
+export default Home

src/pages/Members.js

@@ -0,0 +1,11 @@
+import React from "react"
+
+const Members = () => {
+    return (
+        <div>
+            Members
+        </div>
+    )
+}
+
+export default Members

src/pages/Resources.js

@@ -0,0 +1,11 @@
+import React from "react"
+
+const Resources = () => {
+    return (
+        <div>
+            Resources
+        </div>
+    )
+}
+
+export default Resources