Lazyload rrd v6

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/pages/LazyPage1.tsx

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

src/01-lazyload/pages/LazyPage2.tsx

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

src/01-lazyload/pages/LazyPage3.tsx

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

src/01-lazyload/pages/index.tsx

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

src/index.css

@@ -48,6 +48,9 @@ nav li a {
 }
 
 .nav-active {
-  color: grey;
+  color: black;
+  background-color: white;
   transition: all .3s ease-out;
+  padding: 3px 10px;
+  width: 100%;
 }

src/routes/Navigation.tsx

@@ -1,45 +1,46 @@
-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'
 
 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={ <span>Loading...</span> }>
+      <BrowserRouter>
+        <div className="main-layout">
+          <nav>
+            <img src={logo} alt="React Logo" />
+            <ul>
+              {
+                routes.map(({ to, name }) => (
+                  <li key={to}>
+                    <NavLink to={to} className={({ isActive }) => isActive ? 'nav-active' : ''} replace> {name} </NavLink>
+                  </li>
 
-        {/* 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>
-  );
+                ))
+              }
+            </ul>
+          </nav>
+
+
+          <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,37 @@
+import { lazy, LazyExoticComponent } from 'react';
+// import { LazyPage1, LazyPage2, LazyPage3 } from '../01-lazyload/pages';
+
+type JSXComponent = () => JSX.Element;
+
+interface Route {
+    to: string;
+    path: string;
+    Component: LazyExoticComponent<JSXComponent> | JSXComponent;
+    name: string;
+}
+
+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'
+    }
+];