Lazyload nested rrdv6

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-router-dom": "6",
     "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.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,37 @@
+import { Navigate, NavLink, Route, Routes } from "react-router-dom";
+import { LazyPage1, LazyPage2, LazyPage3 } from "../pages";
+
+
+
+export const LazyLayout = () => {
+  return (
+    <div>
+        <h1>LazyLayout Page</h1>
+
+        <ul>
+            <li>
+                <NavLink to="lazy1">Lazy 1</NavLink>
+            </li>
+            <li>
+                <NavLink to="lazy2">Lazy 2</NavLink>
+            </li>
+            <li>
+                <NavLink to="lazy3">Lazy 3</NavLink>
+            </li>
+
+        </ul>
+
+        <Routes>
+            <Route path="lazy1" element={ <LazyPage1/>}/>
+            <Route path="lazy2" element={ <LazyPage2/>}/>
+            <Route path="lazy3" element={ <LazyPage3/>}/>
+
+
+            <Route path="*" element={ <Navigate replace to="lazy1" /> }/>
+        </Routes>
+    </div>
+  )
+}
+
+
+export default LazyLayout;

src/01-lazyload/pages/LazyPage1.tsx

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

src/01-lazyload/pages/LazyPage2.tsx

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

src/01-lazyload/pages/LazyPage3.tsx

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

src/01-lazyload/pages/NoLazy.tsx

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

src/01-lazyload/pages/index.ts

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

src/routes/Navigation.tsx

@@ -1,45 +1,56 @@
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  NavLink
-} from 'react-router-dom';
+import { Suspense } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { Routes, Route, NavLink, Navigate } from 'react-router-dom';
+import { routes } from './routes';
 
-import logo from '../logo.svg';
+import logo from '../logo.svg'
+//import { LazyPage1,LazyPage2,LazyPage3 } from '../01-lazyload/pages';
 
 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={<span>Loading...</span>}>
+        <BrowserRouter>
+            <div className="main-layout">
+                <nav>
+                    <img src={ logo } alt="React Logo" />
+                    <ul>
+                        {
+                            routes.map(route =>(
+                            <li key={ route.name}>
+                                <NavLink to={route.to}
+                                 className={ ({ isActive }) => isActive ? 'nav-active' : '' }>
+                                     {route.name}
+                                </NavLink>
+                            </li>
+                            )
+                            )
+                        }
+
+                    </ul>
+                </nav>
+
+
+                <Routes>
+                    {
+                        routes.map(route =>(
+
+                            <Route  
+                            key={route.name}
+                            path={ route.path} 
+                            element={ <route.Component/> } 
+                            />
+                        ))
+                    }
+
+
+                    <Route path="/*" element={ <Navigate to={routes[0].to} replace /> } />
+                </Routes>
+
+            </div>
+        </BrowserRouter>
+        </Suspense>
+    )
+}

src/routes/routes.ts

@@ -0,0 +1,38 @@
+import { lazy , LazyExoticComponent} from "react";
+import { NoLazy } from "../01-lazyload/pages/NoLazy";
+
+
+
+
+
+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'));
+
+export const routes: Route[] = [
+
+    {
+        path: '/lazyload/*',
+        to: '/lazyload/',
+        Component: LazyLayout,
+        name: 'lazyLayout',
+    },
+
+    {
+        path: 'no-lazy',
+        to: '/no-lazy',
+        Component: NoLazy,
+        name: 'No lazy',
+    },
+
+
+];