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

package.json

@@ -10,9 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "info": "^1.0.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.17.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
@@ -23,8 +23,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
-    "sass": "^1.99.0",
-    "sass-embedded": "^1.99.0",
     "vite": "^6.3.5"
   }
 }

src/App.jsx

@@ -1,30 +1,28 @@
-import styles from './styles/App.module.scss'
-import React, { useState, useCallback } from 'react'
+import { Suspense, lazy } from 'react'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
-function CounterButton({label, onClick}) {
-    return (
-        <button onClick={onClick} className={styles.counter_button}>{label}</button>
-    )
-}
-function CounterDisplay({value}) {
-    return (<div className={styles.counter_display}>
-            Значение счетчика: <b>{value}</b>
-    </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() {
-    const [counter,setCounter] = useState(0);
-    
-    const increment = () => setCounter(prev => prev + 1);
-    const decrement = () => setCounter(prev => prev - 1);
-    
 	return (
-		<>
-            <h2>Практика по созданию счетчика с колбэками</h2>
-            <CounterButton label="Увеличить" onClick={increment} />
-            <CounterButton label="уменьшить" onClick={decrement} />
-            <CounterDisplay value={counter} />
-		</>
+		<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