Сделали несколько страниц с отложенной загрузкой

package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
-        "react-error-boundary": "^6.1.2",
         "react-router-dom": "^7.17.0"
       },
       "devDependencies": {
@@ -2476,15 +2475,6 @@
         "react": "^19.1.0"
       }
     },
-    "node_modules/react-error-boundary": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.1.2.tgz",
-      "integrity": "sha512-3DpCr5HVdZ0caUjYE/kIHBEJN0mNP3ZCgf16c48uJ5TbWjorKVp+YG8W3XqlJ7vJAVNw6wNIImyPXmFydwmyng==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-error-boundary": "^6.1.2",
     "react-router-dom": "^7.17.0"
   },
   "devDependencies": {

src/App.jsx

@@ -1,26 +1,28 @@
 import { Suspense, lazy } from 'react'
-import { ErrorBoundary } from 'react-error-boundary'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
-const LazyComponent = lazy(() => import('./MyComponent'))
-
-function ErrorFallBack({error, resetErrorBoundary }) {
-    return (
-        <div>
-            <h2>Что то сломалось</h2>
-            <button onClick={resetErrorBoundary}></button>
-        </div>
-    )
-}
+const HomePage = lazy(() => import('./pages/HomePage'))
+const AboutPage = lazy(() => import('./pages/AboutPage'))
+const ContactPage = lazy(() => import('./pages/ContactPage'))
+const AdminPanel = lazy(() => import('./pages/AdminPanel'))
 
 function App() {
 	return (
-		<>
-			<ErrorBoundary FallBackComponent={ErrorFallBack}>
-                <Suspense fallback={<div>Загрузка ...</div>}>
-			        <LazyComponent />
-                </Suspense>
-            </ErrorBoundary>
-		</>
+		<BrowserRouter>
+		    <div>
+                <nav><a href='/'>Главная</a> <a href='/about'>О нас</a> <a href='/contact'>Контакты</a></nav>
+                <main>
+                    <Suspense fallback={<div>Загрузка ...</div>}>
+                        <Routes>
+                            <Route path='/' element={<HomePage />} />
+                            <Route path='/about' element={<AboutPage />} />
+                            <Route path='/contact' element={<ContactPage />} />
+                            <Route path='/admin' element={<AdminPanel />} />
+                        </Routes>
+                    </Suspense>
+                </main>
+		    </div>
+		</BrowserRouter>
 	)
 }
 

src/pages/AboutPage.jsx

@@ -0,0 +1,9 @@
+export function MyComponent() {
+    return (
+        <>
+        <h1>About Page</h1>
+        </>
+        )
+}
+
+export default MyComponent

src/pages/AdminPanel.jsx

@@ -0,0 +1,9 @@
+export function MyComponent() {
+    return (
+        <>
+        <h1>Admin Page</h1>
+        </>
+        )
+}
+
+export default MyComponent

src/pages/ContactPage.jsx

@@ -0,0 +1,9 @@
+export function MyComponent() {
+    return (
+        <>
+        <h1>Contact Page</h1>
+        </>
+        )
+}
+
+export default MyComponent

src/pages/HomePage.jsx

@@ -0,0 +1,9 @@
+export function MyComponent() {
+    return (
+        <>
+        <h1>Home Page</h1>
+        </>
+        )
+}
+
+export default MyComponent