updated

Author: webmasterdevlin

chapter-6/.gitignore

@@ -21,5 +21,4 @@ generated-cra-app
 .cra-template-rb
 template
 
-
 .eslintcache

chapter-6/package-lock.json

@@ -9,10 +9,10 @@
 import { Container } from '@material-ui/core';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
-import { BrowserRouter } from 'react-router-dom';
-import { GlobalStyle } from 'styles/global-styles';
+import { Switch, Route, BrowserRouter } from 'react-router-dom';
 
-import NavigationBar from './views/components/navigation-bar';
+import { GlobalStyle } from 'styles/global-styles';
+import NavigationBar from './components/navigation-bar';
 import { Routes } from './routes';
 
 export function App() {

chapter-6/src/app/views/components/navigation-bar.tsx renamed to chapter-6/src/app/components/navigation-bar.tsx

@@ -11,40 +11,40 @@ export const Routes = () => {
     <Suspense fallback={<LinearProgress style={{ margin: '10rem' }} />}>
       <Switch>
         {/*eager loading*/}
-        <Route exact path={'/'} component={HomePage} />
+        <Route path={'/'} component={HomePage} exact />
         {/*lazy loadings*/}
         <Route
-          exact
           path={'/about'}
           component={lazy(() => import('./views/pages/AboutPage'))}
+          exact
         />
+
         <Route
           path={'/dashboard'}
           render={({ match: { path } }) => (
             <Dashboard>
               <Switch>
                 <Route
-                  exact
                   path={path + '/'}
                   component={lazy(
                     () => import('./views/dashboard/dashboard-default-content'),
                   )}
+                  exact
                 />
                 <Route
-                  exact
                   path={path + '/settings-and-privacy'}
                   component={lazy(
                     () => import('./views/dashboard/settings-and-privacy'),
                   )}
+                  exact
                 />
-                <Route exact from={path + '/*'} to={path} />
               </Switch>
             </Dashboard>
           )}
         />
         {/*eager loading*/}
-        <Route path={'/not-found'} component={NotFoundPage} />
-        <Redirect exact from={'*'} to={'/not-found'} />
+        <Route path={'/not-found'} component={NotFoundPage} exact />
+        <Redirect from={'*'} to={'/not-found'} exact />
       </Switch>
     </Suspense>
   );

chapter-6/src/app/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 const AboutPage = () => {
   return (
     <div>
-      <h1>Hello AboutPage</h1>
+      <h1>This is About Page</h1>
     </div>
   );
 };

chapter-6/src/app/routes.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
-const HomePage = () => {
+const Main = () => {
   return (
-    <div style={{ height: '20rem' }}>
-      <h1>Hello HomePage</h1>
+    <div>
+      <h1>Main Page</h1>
     </div>
   );
 };
 
-export default HomePage;
+export default Main;

chapter-6/src/app/views/pages/AboutPage.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 const NotFoundPage = () => {
   return (
     <div>
-      <h1>Not Found Page - 404</h1>
+      <h1>404 Page Not Found</h1>
     </div>
   );
 };

chapter-6/src/app/views/pages/HomePage.tsx

@@ -23,7 +23,6 @@ import { configureAppStore } from 'store/configureStore';
 
 // Initialize languages
 import './locales/i18n';
-import CssBaseline from '@material-ui/core/CssBaseline';
 
 const store = configureAppStore();
 const MOUNT_NODE = document.getElementById('root') as HTMLElement;
@@ -35,7 +34,6 @@ const ConnectedApp = ({ Component }: Props) => (
   <Provider store={store}>
     <HelmetProvider>
       <React.StrictMode>
-        <CssBaseline />
         <Component />
       </React.StrictMode>
     </HelmetProvider>