Lazy load nested

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-lazy-load/layout/LazyLayout.jsx

@@ -0,0 +1,32 @@
+import { Navigate, NavLink, Route, Routes } from 'react-router-dom'
+import { LazyPage1, LazyPage2, LazyPage3 } from '../pages'
+
+export const LazyLayout = () => {
+  return (
+    <div>
+      <h1>LazyLoyoutPage</h1>
+
+      <ul>
+        <li>
+          <NavLink to='lazy1'>Lazy1</NavLink>
+        </li>
+        <li>
+          <NavLink to='lazy2'>Lazy2</NavLink>
+        </li>
+        <li>
+          <NavLink to='lazy3'>Lazy3</NavLink>
+        </li>
+      </ul>
+
+      <Routes>
+        <Route path='lazy1' element={<LazyPage1 />}></Route>
+        <Route path='lazy2' element={<LazyPage2 />}></Route>
+        <Route path='lazy3' element={<LazyPage3 />}></Route>
+
+        <Route path='*' element={<Navigate to='lazy1' replace />}></Route>
+      </Routes>
+    </div>
+  )
+}
+
+export default LazyLayout

src/01-lazy-load/pages/LazyPage1.tsx

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

src/01-lazy-load/pages/LazyPage2.tsx

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

src/01-lazy-load/pages/LazyPage3.tsx

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

src/01-lazy-load/pages/NoLazy.tsx

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

src/01-lazy-load/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,44 @@
-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 { LazyPage1, LazyPage2, LazyPage3 } from '../01-lazy-load/pages'
+import { routes } from './routes'
 
-import logo from '../logo.svg';
+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>
+    <Suspense fallback={null}>
+      <BrowserRouter>
+        <div className='main-layout'>
+          <nav>
+            <img src={logo} alt='React Logo' />
+            <ul>
+              {routes.map(({ to, name }) => (
+                <li key={name}>
+                  <NavLink
+                    to={to}
+                    className={({ isActive }) => (isActive ? 'nav-active' : '')}
+                  >
+                    {name}
+                  </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>
-  );
-}
+          <Routes>
+            {/* {<Route path='lazy1' element={<LazyPage1 />} />
+          <Route path='lazy2' element={<LazyPage2 />} />
+          <Route path='lazy3' element={<LazyPage3 />} />}
+           */}
+            {routes.map(({ path, to, Component }) => (
+              <Route key={to} path={path} element={<Component />} />
+            ))}
+            <Route path='/*' element={<Navigate to={routes[0].to} replace />} />
+          </Routes>
+        </div>
+      </BrowserRouter>
+    </Suspense>
+  )
+}

src/routes/routes.ts

@@ -0,0 +1,44 @@
+import { lazy, LazyExoticComponent } from 'react'
+import { NoLazy } from '../01-lazy-load/pages/NoLazy'
+// import { LazyPage1, LazyPage2, LazyPage3 } from '../01-lazy-load/pages'
+
+type JSXComponent = () => JSX.Element
+
+interface Route {
+  to: string
+  path: string
+  Component: LazyExoticComponent<JSXComponent> | JSXComponent //es un jsxComponent con Lazy O común
+  name: string
+}
+
+const LazyLayout = lazy(
+  () =>
+    import(
+      /*webpackChunkName: "LazyPage1"*/ '../01-lazy-load/layout/LazyLayout'
+    )
+)
+
+// const Lazy2 = lazy(
+//   () =>
+//     import(/*webpackChunkName: "LazyPage2"*/ '../01-lazy-load/pages/LazyPage2')
+// )
+
+// const Lazy3 = lazy(
+//   () =>
+//     import(/*webpackChunkName: "LazyPage3"*/ '../01-lazy-load/pages/LazyPage3')
+// )
+
+export const routes: Route[] = [
+  {
+    to: '/lazyload/',
+    path: '/lazyload/*', // *  => todo dentro del path lazyload
+    Component: LazyLayout,
+    name: 'Lazy Layout',
+  },
+  {
+    to: '/no-lazy',
+    path: 'no-lazy',
+    Component: NoLazy,
+    name: 'No Lazy',
+  },
+]