Catch All Route

Author: maxwellgordon

src/components/App.js

@@ -1,20 +1,21 @@
-import React,  {Component} from 'react';
+import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import ProductShowPage from './ProductShowPage';
 import ProductIndexPage from './ProductIndexPage';
 import NewProductPage from './NewProductPage';
 import SignInPage from './SignInPage';
 import HomePage from './HomePage';
 import NavBar from './NavBar';
-import { User, Session } from '../requests'
+import { User, Session } from '../requests';
 import AuthRoute from './AuthRoute';
+import NotFoundPage from './NotFoundPage';
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentUser: null
-    }
+      currentUser: null,
+    };
     this.getUser = this.getUser.bind(this);
     this.destroySession = this.destroySession.bind(this);
   }
@@ -28,7 +29,7 @@ class App extends Component {
       if (currentUser.id) {
         this.setState({ currentUser });
       }
-    })
+    });
   }
 
   componentDidMount() {
@@ -42,8 +43,12 @@ class App extends Component {
         <div className="App">
           <NavBar currentUser={currentUser} onSignOut={this.destroySession} />
           <Switch>
-            <Route path="/session/new" exact render={
-              (routeProps) => <SignInPage {...routeProps} onSignIn={this.getUser} />}
+            <Route
+              path="/session/new"
+              exact
+              render={routeProps => (
+                <SignInPage {...routeProps} onSignIn={this.getUser} />
+              )}
             />
             <AuthRoute
               isAuth={currentUser}
@@ -64,11 +69,12 @@ class App extends Component {
               component={ProductIndexPage}
             />
             <Route path="/" exact component={HomePage} />
+            <Route component={NotFoundPage} />
           </Switch>
         </div>
       </Router>
     );
   }
-};
+}
 
 export default App;

src/components/NotFoundPage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function NotFoundPage(props) {
+  return (
+    <main className="NotFoundPage">
+      <h1>404 Not Found</h1>
+    </main>
+  );
+}
+
+export default NotFoundPage;