Render Not Found Page on Invalid Path

services/web/src/components/layout/layout.js

@@ -41,6 +41,7 @@ import ForumContainer from "../../containers/forum/forum";
 import UnlockContainer from "../../containers/unlock/unlock";
 import NewPostContainer from "../../containers/newPost/newPost";
 import PostContainer from "../../containers/post/post";
+import NotFoundConponent from "../../components/notFound/notFound";
 
 import { logOutUserAction } from "../../actions/userActions";
 import { isAccessTokenValid } from "../../utils";
@@ -75,7 +76,10 @@ const AfterLogin = ({
             });
           } else {
             if (!componentRole || (componentRole && componentRole === userRole))
-              return <Component {...props} />;
+              return <>
+                <Route path="/" component={NavBar} />
+                <Component {...props} />
+              </>
             if (userRole === roleTypes.ROLE_MECHANIC)
               return (
                 <Redirect
@@ -126,7 +130,10 @@ const BeforeLogin = ({ component: Component, isLoggedIn, ...rest }) => {
       {...rest}
       render={(props) =>
         !hasUserLoggedIn ? (
-          <Component {...props} />
+          <>
+            <Route path="/" component={NavBar} />
+            <Component {...props} />
+          </>
         ) : (
           <Redirect
             to={{ pathname: "/dashboard", state: { from: props.location } }}
@@ -174,9 +181,13 @@ const StyledComp = connect(
   return (
     <Spin spinning={props.fetchingData} className="spinner">
       <Layout style={{ minHeight: windowHeight }}>
-        <Route path="/" component={NavBar} />
         <Content className="layout-content">
           <Switch>
+            <BeforeLogin
+                path="/"
+                component={LoginContainer}
+                isLoggedIn={props.isLoggedIn}
+            />
             <BeforeLogin
               path="/login"
               component={LoginContainer}
@@ -311,24 +322,7 @@ const StyledComp = connect(
               accessToken={props.accessToken}
               logOutUser={props.logOutUser}
             />
-            <Route
-              render={() => {
-                return (
-                  <Redirect
-                    to={{
-                      pathname: `${
-                        !props.isLoggedIn
-                          ? "/login"
-                          : props.role === roleTypes.ROLE_USER
-                            ? "/dashboard"
-                            : "/mechanic-dashboard"
-                      }`,
-                      state: { from: props.location },
-                    }}
-                  />
-                );
-              }}
-            />
+            <Route component={NotFoundConponent} />
           </Switch>
         </Content>
       </Layout>

services/web/src/components/notFound/notFound.js

@@ -0,0 +1,27 @@
+/*
+ *
+ * Licensed under the Apache License, Version 2.0 (the “License”);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an “AS IS” BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+const NotFound = () => {
+  return (
+    <div>
+      <h1>404 - Page Not Found</h1>
+      <p>The page you are looking for does not exist.</p>
+    </div>
+  );
+};
+
+export default NotFound;