add lazy loading example

package.json

@@ -7,6 +7,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@loadable/component": "^5.15.2",
     "history": "^5.1.0",
     "query-string": "^7.0.1",
     "react": "^17.0.0",

src/App.LazyLoading.jsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Routes, Route, Link } from 'react-router-dom';
+import loadable from '@loadable/component';
+
+const Home = loadable(() => import('./pages/Home'), {
+  resolveComponent: (components) => components.Home,
+});
+
+const About = loadable(() => import('./pages/About'), {
+  resolveComponent: (components) => components.About,
+});
+
+const App = () => {
+  return (
+    <>
+      <h1>React Router</h1>
+
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+      </nav>
+
+      <Routes>
+        <Route index element={<Home />} />
+        <Route path="about" element={<About />} />
+        <Route path="*" element={<NoMatch />} />
+      </Routes>
+    </>
+  );
+};
+
+const NoMatch = () => {
+  return <p>There's nothing here: 404!</p>;
+};
+
+export default App;
+
+// import loadable from '@loadable/component';
+
+// import * as ROUTES from '@/constants/routes';
+// import { Page } from '@/components/Layout/Page';
+
+// import { Navigation } from './Navigation';
+
+// const ReviewKpis = loadable(() => import('./ReviewKpis'), {
+//   resolveComponent: (components) => {
+//     return components.ReviewKpis;
+//   },
+// });

src/main.jsx

@@ -9,10 +9,11 @@ import { QueryParamProvider } from 'use-query-params';
 
 // import App from './App.jsx';
 // import App from './App.Redirect.jsx';
-import App from './App.Authentication.jsx';
+// import App from './App.Authentication.jsx';
 // import App from './App.Nested.jsx';
 // import App from './App.Descendant.jsx';
 // import App from './App.QueryParams.jsx';
+import App from './App.LazyLoading.jsx';
 
 // use-query-params adapeter for React Router 6
 const RouteAdapter = ({ children }) => {

src/pages/About.jsx

@@ -0,0 +1,7 @@
+export const About = () => {
+  return (
+    <>
+      <h2>About</h2>
+    </>
+  );
+};

src/pages/Home.jsx

@@ -0,0 +1,7 @@
+export const Home = () => {
+  return (
+    <>
+      <h2>Home</h2>
+    </>
+  );
+};