diff --git a/package.json b/package.json
index d9a0e2130..f245d4fa2 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/01-lazyload/layout/LazyLayout.tsx b/src/01-lazyload/layout/LazyLayout.tsx
new file mode 100644
index 000000000..d1461ccc2
--- /dev/null
+++ b/src/01-lazyload/layout/LazyLayout.tsx
@@ -0,0 +1,37 @@
+import { Navigate, NavLink, Route, Routes } from "react-router-dom";
+import { LazyPage1, LazyPage2, LazyPage3 } from "../pages";
+
+
+
+export const LazyLayout = () => {
+ return (
+
+
LazyLayout Page
+
+
+ -
+ Lazy 1
+
+ -
+ Lazy 2
+
+ -
+ Lazy 3
+
+
+
+
+
+ }/>
+ }/>
+ }/>
+
+
+ }/>
+
+
+
LazyPage1
+
+ )
+}
+
+
+export default LazyPage1;
diff --git a/src/01-lazyload/pages/LazyPage2.tsx b/src/01-lazyload/pages/LazyPage2.tsx
new file mode 100644
index 000000000..2c7ec58e0
--- /dev/null
+++ b/src/01-lazyload/pages/LazyPage2.tsx
@@ -0,0 +1,13 @@
+
+
+
+export const LazyPage2 = () => {
+ return (
+
+
LazyPage2
+
+ )
+}
+
+
+export default LazyPage2;
\ No newline at end of file
diff --git a/src/01-lazyload/pages/LazyPage3.tsx b/src/01-lazyload/pages/LazyPage3.tsx
new file mode 100644
index 000000000..681c2846f
--- /dev/null
+++ b/src/01-lazyload/pages/LazyPage3.tsx
@@ -0,0 +1,13 @@
+
+
+
+export const LazyPage3 = () => {
+ return (
+
+
LazyPage3
+
+ )
+}
+
+
+export default LazyPage3;
\ No newline at end of file
diff --git a/src/01-lazyload/pages/NoLazy.tsx b/src/01-lazyload/pages/NoLazy.tsx
new file mode 100644
index 000000000..5f0bc7794
--- /dev/null
+++ b/src/01-lazyload/pages/NoLazy.tsx
@@ -0,0 +1,10 @@
+
+
+
+export const NoLazy = () => {
+ return (
+
+
NoLazy Component
+
+ )
+}
diff --git a/src/01-lazyload/pages/index.ts b/src/01-lazyload/pages/index.ts
new file mode 100644
index 000000000..24e3cd429
--- /dev/null
+++ b/src/01-lazyload/pages/index.ts
@@ -0,0 +1,6 @@
+export { LazyPage1 } from "./LazyPage1";
+export { LazyPage2 } from "./LazyPage2";
+export { LazyPage3 } from "./LazyPage3";
+
+
+
diff --git a/src/routes/Navigation.tsx b/src/routes/Navigation.tsx
index a9bfe83b0..d20102303 100644
--- a/src/routes/Navigation.tsx
+++ b/src/routes/Navigation.tsx
@@ -1,45 +1,56 @@
-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'
+//import { LazyPage1,LazyPage2,LazyPage3 } from '../01-lazyload/pages';
export const Navigation = () => {
- return (
-
-
-
-
- {/* A
looks through its children s and
- renders the first one that matches the current URL. */}
-
-
- About
-
-
- Users
-
-
- Home
-
-
-
+
+
+
+
+ {
+ routes.map(route =>(
+
+ }
+ />
+ ))
+ }
+
+
+ } />
+
+
+