Error 404 Page Not Found

frontend/src/components/App/index.js

@@ -1,12 +1,13 @@
 import React from 'react';
-import {BrowserRouter as Router, Route} from 'react-router-dom';
+import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 import { AuthProvider, PrivateRoute } from '../Auth';
 import { AuthUtilsConsumer } from '../AuthUtils';
 
 import LandingPage from '../Landing';
 import SignInPage from '../SignIn'
 import ViewActivitiesPage from '../ViewActivities';
 import ViewTripsPage from '../ViewTrips';
+import { ErrorPageNotFound } from '../Errors';
 import * as ROUTES from '../../constants/routes';
 
 /**
@@ -20,10 +21,14 @@ class App extends React.Component {
         <AuthUtilsConsumer>
           <Router>
             <div>
-              <Route exact path={ROUTES.LANDING} component={LandingPage} />
-              <Route path={ROUTES.SIGN_IN} component={SignInPage} />
-              <PrivateRoute path={ROUTES.VIEW_TRIPS} component={ViewTripsPage} />
-              <PrivateRoute path={ROUTES.VIEW_ACTIVITIES + '/:tripId'} component={ViewActivitiesPage} />
+              <Switch>
+                <Route exact path={ROUTES.LANDING} component={LandingPage} />
+                <Route path={ROUTES.SIGN_IN} component={SignInPage} />
+                <PrivateRoute path={ROUTES.VIEW_TRIPS} component={ViewTripsPage} />
+                <PrivateRoute path={ROUTES.VIEW_ACTIVITIES + '/:tripId'} component={ViewActivitiesPage} />
+                {/* The ErrorNotFound component MUST be at the bottom of the Router! */}
+                <Route component={ErrorPageNotFound} />
+              </Switch>
             </div>
           </Router>
         </AuthUtilsConsumer>

frontend/src/components/Errors/ErrorPageNotFound.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import GoToLandingButton from './GoToLandingButton.js';
+
+/**
+ * Error component displayed when the user attempts to navigate to a page of the
+ * website that does not exist.
+ */
+class ErrorPageNotFound extends React.Component {
+  /** @inheritdoc */
+  render() {
+    return (
+      <div>
+        <h1>Error 404 Page Not Found</h1>
+        <p>Oops, looks like the page you were looking for doesn't exist.</p>
+        <GoToLandingButton />
+      </div>
+    );
+  }
+};
+
+export default ErrorPageNotFound;

frontend/src/components/Errors/GoToLandingButton.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Button from 'react-bootstrap/Button';
+
+import { LANDING } from '../../constants/routes.js';
+
+/**
+ * Component that redirects the user back to the landing page when they
+ * encounter a 404 error.
+ */
+const GoToLandingButton = () => {
+  const history = useHistory();
+
+  function goToLanding() {
+    history.push(LANDING);
+  }
+
+  return (
+    <Button type='button' onClick={goToLanding} variant='primary' size='lg'>
+      Return to Home
+    </Button>
+  );
+}
+
+export default GoToLandingButton;

frontend/src/components/Errors/index.js

@@ -0,0 +1,5 @@
+import ErrorPageNotFound from './ErrorPageNotFound.js';
+
+export {
+  ErrorPageNotFound
+}