PageNotFound

src/components/App.js

@@ -1,15 +1,19 @@
 import React from "react";
-import { Route } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
 import HomePage from "./home/HomePage";
 import AboutPage from "./about/AboutPage";
 import Header from "./common/Header";
+import PageNotFound from "./PageNotFound";
 
 function App() {
   return (
     <div className="container-fluid">
       <Header />
-      <Route exact path="/" component={HomePage} />
-      <Route path="/about" component={AboutPage} />
+      <Switch>
+        <Route exact path="/" component={HomePage} />
+        <Route path="/about" component={AboutPage} />
+        <Route component={PageNotFound} />
+      </Switch>
     </div>
   );
 }

src/components/PageNotFound.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const PageNotFound = () => <h1>Oops! Page not found</h1>;
+
+export default PageNotFound;