Сделали отложеную загрузку и перехват исключений

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-error-boundary": "^6.1.2",
         "react-router-dom": "^7.17.0"
       },
       "devDependencies": {
@@ -2475,6 +2476,15 @@
         "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,6 +12,7 @@
   "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,28 +1,26 @@
 import { Suspense, lazy } from 'react'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { ErrorBoundary } from 'react-error-boundary'
 
-const HomePage = lazy(() => import('./pages/HomePage'))
-const AboutPage = lazy(() => import('./pages/AboutPage'))
-const ContactPage = lazy(() => import('./pages/ContactPage'))
-const AdminPanel = lazy(() => import('./pages/AdminPanel'))
+const LazyComponent = lazy(() => import('./MyComponent'))
+
+function ErrorFallBack({error, resetErrorBoundary }) {
+    return (
+        <div>
+            <h2>Что то сломалось</h2>
+            <button onClick={resetErrorBoundary}></button>
+        </div>
+    )
+}
 
 function App() {
 	return (
-		<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>
+		<>
+			<ErrorBoundary FallBackComponent={ErrorFallBack}>
+                <Suspense fallback={<div>Загрузка ...</div>}>
+			        <LazyComponent />
+                </Suspense>
+            </ErrorBoundary>
+		</>
 	)
 }
 

src/pages/AboutPage.jsx

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

src/pages/AdminPanel.jsx

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

src/pages/ContactPage.jsx

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

src/pages/HomePage.jsx

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