diff --git a/package.json b/package.json
index d9a0e2130..57cdb20c0 100644
--- a/package.json
+++ b/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.6.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
diff --git a/src/01-layload/layout/LazyLayout.tsx b/src/01-layload/layout/LazyLayout.tsx
new file mode 100644
index 000000000..808fabd6e
--- /dev/null
+++ b/src/01-layload/layout/LazyLayout.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { NavLink, Route, Routes } from "react-router-dom";
+import { LazyPage1, LazyPage2 } from "../pages";
+
+const LazyLayout = () => {
+ return (
+
+
LazyLayout
+
+ -
+ Lazy 1
+
+ -
+ Lazy 2
+
+
+
+
+ } />
+ } />
+ Not FoundLazyPage1
;
+};
+
+export default LazyPage1;
diff --git a/src/01-layload/pages/LazyPage2.tsx b/src/01-layload/pages/LazyPage2.tsx
new file mode 100644
index 000000000..7fb219fa1
--- /dev/null
+++ b/src/01-layload/pages/LazyPage2.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const LazyPage2 = () => {
+ return LazyPage2
;
+};
+
+export default LazyPage2;
diff --git a/src/01-layload/pages/index.ts b/src/01-layload/pages/index.ts
new file mode 100644
index 000000000..af74d1f29
--- /dev/null
+++ b/src/01-layload/pages/index.ts
@@ -0,0 +1,2 @@
+export { default as LazyPage1 } from "./LazyPage1";
+export { default as LazyPage2 } from "./LazyPage2";
diff --git a/src/routes/Navigation.tsx b/src/routes/Navigation.tsx
index a9bfe83b0..43687328e 100644
--- a/src/routes/Navigation.tsx
+++ b/src/routes/Navigation.tsx
@@ -1,45 +1,46 @@
+import { Suspense } from "react";
import {
BrowserRouter as Router,
- Switch,
+ Routes,
Route,
- NavLink
-} from 'react-router-dom';
+ NavLink,
+ Navigate,
+} from "react-router-dom";
-import logo from '../logo.svg';
+import logo from "../logo.svg";
+import { routes } from "./routes";
export const Navigation = () => {
return (
-
-
-
+
...Loading}>
+
+
+
- {/* A
looks through its children s and
+ {/* A looks through its children s and
renders the first one that matches the current URL. */}
-
-
- About
-
-
- Users
-
-
- Home
-
-
-