Lazyload nested components

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,32 @@
+import { NavLink, Routes, Route, Navigate } from "react-router-dom";
+import { LazyPage1, LazyPage2, LazyPage3 } from "../pages";
+
+const LazyLayout = () => {
+  return (
+    <div>
+      <h1>Lazy Layou Page</h1>
+
+      {/* Rutas hijas aquí */}
+      <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,9 @@
+const LazyPage1 = () => {
+  return (
+    <>
+      <h1>LazyPage 1</h1>
+    </>
+  );
+};
+
+export default LazyPage1;

src/01-lazyload/pages/LazyPage2.tsx

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

src/01-lazyload/pages/LazyPage3.tsx

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

src/01-lazyload/pages/NoLazy.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const NoLazy = () => {
+  return (
+    <div>
+      <h1>No Lazyload component</h1>
+    </div>
+  );
+};
+
+export default NoLazy;

src/01-lazyload/pages/index.ts

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

src/App.tsx

@@ -1,4 +1,4 @@
-import { Navigation } from './routes/Navigation';
+import { Navigation } from "./routes/Navigation";
 
 function App() {
   return (

src/routes/Navigation.tsx

@@ -1,45 +1,40 @@
-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 logo from '../logo.svg';
+import logo from "../logo.svg";
+import { routes } from "./routes";
 
 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={<h1>Cargando</h1>}>
+      <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>
 
-        {/* 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>
+            {routes.map(({ path, Component }) => (
+              <Route key={path} path={path} element={<Component />} />
+            ))}
+
+            <Route path="/*" element={<Navigate to={routes[0].to} replace />} />
+          </Routes>
+        </div>
+      </BrowserRouter>
+    </Suspense>
   );
-}
+};

src/routes/routes.ts

@@ -0,0 +1,71 @@
+import { lazy, LazyExoticComponent } from "react";
+import NoLazy from "../01-lazyload/pages/NoLazy";
+
+// import { LazyPage1 } from "./../01-lazyload/pages/index";
+
+type JSXComponent = () => JSX.Element;
+
+interface Route {
+  to: string;
+  path: string;
+  Component: LazyExoticComponent<JSXComponent> | JSXComponent;
+  name: string;
+}
+
+const lazyLayout = lazy(
+  () =>
+    import(
+      /*webpackChunkName: "LazyLayouComponent" */ "../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",
+  // },
+  {
+    to: "/inicio/",
+    path: "/inicio/*",
+    Component: lazyLayout,
+    name: "Dashboard",
+  },
+  {
+    to: "/no-lazy",
+    path: "no-lazy",
+    Component: NoLazy,
+    name: "No Lazy",
+  },
+];