Lazylead nested rrd6

package.json

@@ -12,7 +12,7 @@
     "@types/react-dom": "^17.0.0",
     "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"

src/01-lazyload/layout/LazyLayout.tsx

@@ -0,0 +1,31 @@
+import { Navigate, NavLink, Route, Routes } from "react-router-dom"
+import { LazyPage1, LazyPage2, LazyPage3 } from "../pages"
+
+export const LazyLayout = () => 
+{
+    return(
+        <div>
+        <h1>Lazy Layout Page</h1>
+        {/* rutas hijas aqui */}
+            <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,10 @@
+
+
+export const LazyPage1 = () =>
+{
+    return(
+        <h3>Lazy Page 1</h3>
+    )
+}
+
+export default LazyPage1

src/01-lazyload/pages/LazyPage2.tsx

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

src/01-lazyload/pages/LazyPage3.tsx

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

src/01-lazyload/pages/NoLazy.tsx

@@ -0,0 +1,12 @@
+import { NavLink, Route, Routes } from "react-router-dom"
+import {LazyPage1, LazyPage2, LazyPage3} from "../pages/index"
+
+export const NoLazy = () => 
+{
+    return(
+        <div>
+            <h1>No LazyLoading Component </h1>
+
+        </div>
+    )
+}

src/01-lazyload/pages/index.ts

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

src/components/loading/Loading.tsx

@@ -0,0 +1,11 @@
+
+import image from './loading.gif'
+
+export const Loading = () => 
+{
+    return(
+        <img src={image} alt="loading"/>
+    )
+}
+
+export default Loading

src/routes/Components/Lix.tsx

@@ -0,0 +1,24 @@
+import { NavLink } from "react-router-dom"
+import { RouteData } from "../types/types"
+
+export const Lix = (props: LixProps) =>
+{
+  const {path, to, name} = props.element
+
+  return(
+    <li key={path}>
+      <NavLink 
+        to={to}
+         className={({isActive}) => isActive ? 'nav-active' : '' }>
+          {name}
+      </NavLink>
+    </li>
+  )
+
+
+}
+
+
+interface LixProps{
+  element: RouteData
+}

src/routes/Navigation.tsx

@@ -1,45 +1,34 @@
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  NavLink
-} from 'react-router-dom';
-
+import { Suspense } from 'react';
+import {BrowserRouter, Routes, Route, NavLink} from 'react-router-dom';
+import { Loading } from '../components/loading/Loading';
 import logo from '../logo.svg';
+import { Lix } from './Components/Lix';
+import { routes } from './routes';
+import { RouteData } from './types/types';
+
+const RS = ({path, Component} : RouteData) =>  (<Route key={path} path={path} element={<Component/>}/>)
 
 export const Navigation = () => {
+  // el Suspense es para indicarle a react que debe de esperar, mientras lo haces has otra cosa... (un componete de carga o loading)
   return (
-    <Router>
+    <Suspense fallback={<Loading />}>
+    <BrowserRouter>
       <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>
+            {routes.map(R => <Lix element={R} /> )}
           </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>
+          <Routes>
+              {routes.map((route) =>  RS(route))}
+              <Route path="/" element={<>Home Page</>}/>
+              <Route path="/*" element={<>404 Not Found</>}/>
+          </Routes>
+
       </div>
-    </Router>
+    </BrowserRouter>
+    </Suspense>
   );
 }

src/routes/routes.ts

@@ -0,0 +1,14 @@
+import { lazy } from "react";
+import { NoLazy } from "../01-lazyload/pages/NoLazy";
+import { RouteData } from "./types/types";
+//import { LazyPage1, LazyPage2, LazyPage3 } from "../01-lazyload/pages";
+
+
+// Aqui inicio con la configuracion del lazy load
+// OJO: Importante para agregar un elemento y usar la funcion lazy. el componente debe de estar importado por defecto
+const Layout = lazy(() => import(/* webpackChunkName: "layout" */ '../01-lazyload/layout/LazyLayout'))
+//Ojo: cuando se coloca el path como en /layout/* indica que al entrar alli se va a encontrar un pack diferente para las rutas de alli
+export const routes: RouteData[] = [
+    {to: '/lazyload/', path:'/lazyload/*', Component: Layout, name: 'layout ' },
+    {to: '/noLazy', path:'NoLazy', Component: NoLazy, name: 'noLazy || dashboard' },
+]

src/routes/types/types.ts

@@ -0,0 +1,11 @@
+import { LazyExoticComponent } from "react"
+
+// esto es para disminuir y para ser mas simple a la hora de explicar estos tipados
+type TSXComponent = () => JSX.Element
+//esto es el tipo o forma que tienen mis rutas
+export interface RouteData {
+    to: string
+    path: string
+    name: string
+    Component: LazyExoticComponent<TSXComponent> | TSXComponent
+}