CoursesPage

src/components/App.js

@@ -4,6 +4,7 @@ import HomePage from "./home/HomePage";
 import AboutPage from "./about/AboutPage";
 import Header from "./common/Header";
 import PageNotFound from "./PageNotFound";
+import CoursesPage from "./courses/CoursesPage";
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
       <Switch>
         <Route exact path="/" component={HomePage} />
         <Route path="/about" component={AboutPage} />
+        <Route path="/courses" component={CoursesPage} />
         <Route component={PageNotFound} />
       </Switch>
     </div>

src/components/common/Header.js

@@ -10,6 +10,10 @@ const Header = () => {
         Home
       </NavLink>
       {" | "}
+      <NavLink to="/courses" activeStyle={activeStyle}>
+        Courses
+      </NavLink>
+      {" | "}
       <NavLink to="/about" activeStyle={activeStyle}>
         About
       </NavLink>

src/components/courses/CoursesPage.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+class CoursesPage extends React.Component {
+  render() {
+    return <h2>Courses</h2>;
+  }
+}
+
+export default CoursesPage;