Add invalid route page

src/App.js

@@ -16,6 +16,7 @@ import AccountsAddEdit from './components/pages/internal/AccountsAddEdit';
 import ApplicationsAddEdit from './components/pages/internal/ApplicationsAddEdit';
 import SipTrunksAddEdit from './components/pages/internal/SipTrunksAddEdit';
 import PhoneNumbersAddEdit from './components/pages/internal/PhoneNumbersAddEdit';
+import InvalidRoute from './components/pages/InvalidRoute';
 
 import Notification from './components/blocks/Notification';
 import Nav from './components/blocks/Nav';
@@ -67,6 +68,7 @@ function App() {
           <PhoneNumbersAddEdit />
         </Route>
 
+        <Route><InvalidRoute /></Route>
       </Switch>
     </Router>
   );

src/components/pages/InvalidRoute.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components/macro';
+import SetupTemplate from '../templates/SetupTemplate';
+import InternalTemplate from '../templates/InternalTemplate';
+import Link from '../elements/Link';
+
+const Container = styled.div`
+  padding: 4rem;
+  text-align: center;
+`;
+
+const InvalidRoute = () => {
+  const [ isLoggedIn, setIsLoggedIn ] = useState(false);
+  useEffect(() => {
+    if (localStorage.getItem('token')) {
+      setIsLoggedIn(true);
+    }
+  }, [isLoggedIn]);
+
+  return (
+    isLoggedIn ? (
+      <InternalTemplate title="Invalid Route">
+        <Container>
+          That page doesn't exist.
+        </Container>
+      </InternalTemplate>
+    ) : (
+      <SetupTemplate title="Invalid Route">
+        <Container>
+          <p>That page doesn't exist.</p>
+          <p><Link to="/">Log In</Link></p>
+        </Container>
+      </SetupTemplate>
+    )
+  );
+};
+
+export default InvalidRoute;