Lazyload nested rrd6

README.md

@@ -6,20 +6,20 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
-### `yarn start`
+### `npm start`
 
 Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn test`
+### `npm run test`
 
 Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `yarn build`
+### `npm run build`
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -29,7 +29,7 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn eject`
+### `npm run eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 

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.2.1",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

src/01-lazyload/layout/LazyLayout.tsx

@@ -0,0 +1,35 @@
+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={ <div>Not Found</div> }/> */}
+                <Route path='*' element={ <Navigate replace to='lazy1' /> }/>
+            </Routes>
+
+        </div>
+    )
+};
+
+
+export default LazyLayout;

src/01-lazyload/pages/LazyPage1.tsx

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

src/01-lazyload/pages/LazyPage2.tsx

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

src/01-lazyload/pages/LazyPage3.tsx

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

src/01-lazyload/pages/NoLazy.tsx

@@ -0,0 +1,8 @@
+
+export const NoLazy = () => {
+    return (
+        <div>
+            <h1>NoLazy Page</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/index.css

@@ -24,7 +24,7 @@ nav {
   background-color: #363a45;
   height: 100vh;
   margin-right: 15px;
-  overflow-y: scroll;
+  overflow-y: auto;
   text-align: center;
   width: 250px;
 }

src/routes/Navigation.tsx

@@ -1,45 +1,46 @@
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  NavLink
-} from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { Routes, Route, NavLink, Navigate } from 'react-router-dom';
+import { routes } from './routes';
+// import { LazyPage1, LazyPage2, LazyPage3 } from '../01-lazyload/pages'
 
-import logo from '../logo.svg';
+import logo from '../logo.svg'
+import { Suspense } from 'react';
 
 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>
+    return (
+        <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' : '' }>{ 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,29 @@
+import { lazy, LazyExoticComponent } from "react";
+import { NoLazy } from "../01-lazyload/pages/NoLazy";
+// 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 LazyLayout = lazy( () => import( /* webpackChunkName: 'LazyLayout' */ '../01-lazyload/layout/LazyLayout'));
+
+export const routes:Route[] = [
+    {
+        to: '/lazyload/',
+        path: '/lazyload/*',
+        Component: LazyLayout,
+        name: 'Lazy Layout'
+    },
+    {
+        to: 'no-lazy',
+        path: 'no-lazy',
+        Component: NoLazy,
+        name: 'No Lazy'
+    }
+]