Original

package.json

@@ -3,19 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.0.3",
+    "@types/node": "^16.11.9",
+    "@types/react": "^17.0.35",
+    "@types/react-dom": "^17.0.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "react-router-dom": "6",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.5.2",
+    "web-vitals": "^2.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -42,6 +42,6 @@
     ]
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.1.9"
+    "@types/react-router-dom": "^5.3.2"
   }
 }

src/01-lazyload/layout/LazyLayout.tsx

@@ -0,0 +1,11 @@
+
+const LazyLayout = () => {
+  return (
+
+    <div>
+      <h1>LazyLayout Page</h1>
+    </div>
+  )
+}
+
+export default LazyLayout;

src/01-lazyload/pages/LazyPage1.tsx

@@ -0,0 +1,9 @@
+
+export const LazyPage1 = () => {
+  return (
+
+    <h1>Lazy Page 1</h1>
+  )
+}
+
+export default LazyPage1;

src/01-lazyload/pages/LazyPage2.tsx

@@ -0,0 +1,10 @@
+
+export const LazyPage2 = () => {
+  return (
+
+    <h1>Lazy Page 2</h1>
+  )
+}
+
+
+export default LazyPage2;

src/01-lazyload/pages/LazyPage3.tsx

@@ -0,0 +1,9 @@
+
+export const LazyPage3 = () => {
+  return (
+
+    <h1>Lazy Page 3</h1>
+  )
+}
+
+export default LazyPage3;

src/01-lazyload/pages/NoLazy.tsx

@@ -0,0 +1,8 @@
+const NoLazy = () => {
+  return (
+    <div>
+      <h1>NoLazy Page</h1>
+    </div>
+  )
+}
+export default NoLazy

src/01-lazyload/pages/index.ts

@@ -0,0 +1,3 @@
+export { LazyPage1 } from './LazyPage1';
+export { LazyPage2 } from './LazyPage2';
+export { LazyPage3 } from './LazyPage3';

src/routes/Navigation.tsx

@@ -1,45 +1,51 @@
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  NavLink
-} from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { Routes, Route, NavLink, Navigate } from 'react-router-dom';
+
+import logo from '../logo.svg'
+
+import { routes } from './routes';
+import { Suspense } from 'react';
 
-import logo from '../logo.svg';
 
 export const Navigation = () => {
-  return (
-    <Router>
-      <div className="main-layout">
-        <nav>
-            <img src={ logo } alt="React Logo" />
-          <ul>
-            <li>
-              <NavLink to="/" activeClassName="nav-active" exact>Home</NavLink>
-            </li>
-            <li>
-              <NavLink to="/about" activeClassName="nav-active" exact>About</NavLink>
-            </li>
-            <li>
-              <NavLink to="/users" activeClassName="nav-active" exact>Users</NavLink>
-            </li>
-          </ul>
-        </nav>
-
-        {/* A <Switch> looks through its children <Route>s and
-            renders the first one that matches the current URL. */}
-        <Switch>
-          <Route path="/about">
-            <h1>About</h1>
-          </Route>
-          <Route path="/users">
-            <h1>Users</h1>
-          </Route>
-          <Route path="/">
-            <h1>Home</h1>
-          </Route>
-        </Switch>
-      </div>
-    </Router>
-  );
-}
+    return (
+      <Suspense fallback={ null }>
+        <BrowserRouter>
+            <div className="main-layout">
+                <nav>
+                    <img src={ logo } alt="React Logo" />
+                    <ul>
+                      {
+                        routes.map(route =>(
+                          <li key={ route.to }>
+                              <NavLink 
+                                to={ route.to } 
+                                className={ ({ isActive }) => isActive ? 'nav-active' : '' }>
+                                  { route.name }
+                              </NavLink>
+                          </li>
+                        ))
+                      }
+
+                    </ul>
+                </nav>
+
+
+                <Routes>
+
+                    {
+                        routes.map(route =>(
+                          <Route key={ route.to } path={route.path} element={ <route.Component/> } />
+
+                        ))
+                      }
+
+                    <Route path="/*" element={ <Navigate to="/lazy1" replace /> } />
+                </Routes>
+
+            </div>
+        </BrowserRouter>
+
+      </Suspense>
+    )
+}

src/routes/routes.ts

@@ -0,0 +1,40 @@
+
+import { lazy, LazyExoticComponent } from 'react';
+import {   LazyPage3 } from '../01-lazyload/pages';
+
+type JSXComponent =  () => JSX.Element;
+
+interface Route {
+  to: string;
+  path: string;
+  Component: LazyExoticComponent<JSXComponent> | JSXComponent;
+  name: string;
+};
+
+
+const LazyLayout = lazy(()=> import ( /*webpackChunkName: "LazyLayout" */ '../01-lazyload/layout/LazyLayout'));
+const Lazy1 = lazy(()=> import ( /*webpackChunkName: "LazyPage1" */ '../01-lazyload/pages/LazyPage1'));
+const Lazy2 = lazy(()=> import ( /*webpackChunkName: "LazyPage2" */ '../01-lazyload/pages/LazyPage2'));
+const Lazy3 = lazy(()=> import ( /*webpackChunkName: "LazyPage3" */ '../01-lazyload/pages/LazyPage3'));
+
+
+export const routes: Route[] = [
+  {
+    to: '/lazy1',
+    path: 'lazy1',
+    Component: Lazy1,
+    name: 'Lazy-1'
+  },
+  {
+    to: '/lazy2',
+    path: 'lazy2',
+    Component: Lazy2,
+    name: 'Lazy-2'
+  },
+  {
+    to: '/lazy3',
+    path: 'lazy3',
+    Component: Lazy3,
+    name: 'Lazy-3'
+  }
+];