Что доделали по уроку

package-lock.json

@@ -11,6 +11,7 @@
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
 				"react-icons": "^5.5.0",
+				"react-router-dom": "^7.15.1",
 				"sass-embedded": "^1.89.2"
 			},
 			"devDependencies": {
@@ -1620,6 +1621,19 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/cookie": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+			"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.6",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2505,6 +2519,44 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-router": {
+			"version": "7.15.1",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.15.1.tgz",
+			"integrity": "sha512-R8rl9HhgikFYoPJymnUtPXWbnDb3oget6lQnfIoupbt61aT9aOhRkDsY2XRhZRyX1Z/8a5sL74fXmFNm3NRK5A==",
+			"license": "MIT",
+			"dependencies": {
+				"cookie": "^1.0.1",
+				"set-cookie-parser": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=18",
+				"react-dom": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/react-router-dom": {
+			"version": "7.15.1",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.15.1.tgz",
+			"integrity": "sha512-AzF62gjY6U9rkMq4RfP/r2EVtQ7DMfNMjyOp/flLTCrtRylLiK4wT4pSq6O8rOXZ2eXdZYJPEYe+ifomiv+Igg==",
+			"license": "MIT",
+			"dependencies": {
+				"react-router": "7.15.1"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=18",
+				"react-dom": ">=18"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2898,6 +2950,12 @@
 				"semver": "bin/semver.js"
 			}
 		},
+		"node_modules/set-cookie-parser": {
+			"version": "2.7.2",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+			"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+			"license": "MIT"
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",
+		"react-router-dom": "^7.15.1",
 		"sass-embedded": "^1.89.2"
 	},
 	"devDependencies": {

src/App.jsx

@@ -1,15 +0,0 @@
-import styles from './App.module.scss'
-
-import Header from './components/header'
-import ProductList from './components/list'
-
-const App = () => {
-	return (
-		<div className={styles.container}>
-			<Header />
-			<ProductList />
-		</div>
-	)
-}
-
-export default App

src/components/card/index.jsx

@@ -1,9 +1,11 @@
 import styles from './index.module.scss'
 
 import WishIcon from '../../assets/icons/wish.svg'
+import { Link } from 'react-router-dom'
 
-const ProductCard = ({ name, price, imageUrl }) => {
+const ProductCard = ({ id, name, price, imageUrl }) => {
 	return (
+        
 		<div className={styles.product}>
 			<div className={styles.image}>
 				<img src={imageUrl} alt='' />
@@ -14,7 +16,9 @@ const ProductCard = ({ name, price, imageUrl }) => {
 				</div>
 			</div>
 			<div className={styles.content}>
+				<Link to={{ pathname: `/catalog/${id}` }} state={ name, price}>
 				    <h4>{name}</h4>
+				</Link>
 				<div className={styles.stats}>
 					<span>${price}</span>
 				</div>

src/components/header/index.jsx

@@ -4,6 +4,7 @@ import CartIcon from '../../assets/icons/cart.svg'
 import UserIcon from '../../assets/icons/user.svg'
 import WishlistIcon from '../../assets/icons/wishlist.svg'
 import LoopIcon from '../../assets/icons/loop.svg'
+import { Link, NavLink } from 'react-router-dom'
 
 const Header = () => {
 	return (
@@ -12,16 +13,22 @@ const Header = () => {
 			<nav>
 				<ul>
 					<li>
-						<a href='#'>Home</a>
+						<NavLink to={{ pathname: '/' }}
+						    className={ ({ isActive }) => (isActive ? styles.active : '')}>
+						    Главная
+						</NavLink>
 					</li>
 					<li>
-						<a href='#'>Contact</a>
+						<Link to={{ pathname: '/contact' }}>Контакты</Link>
 					</li>
 					<li>
-						<a href='#'>About</a>
+						<NavLink to={{ pathname: '/about' }}
+                        className={ ({ isActive }) => (isActive ? styles.active : '')}>
+						    О нас
+				        </NavLink>
 					</li>
 					<li>
-						<a href='#'>Sign Up</a>
+						<Link to={{ pathname: '/login' }}>Sign Up</Link>
 					</li>
 				</ul>
 			</nav>
@@ -31,13 +38,21 @@ const Header = () => {
 			</div>
 			<div className={styles.buttons}>
 				<button>
+					<Link to={{ pathname: '/wishlist' }}>
 						<img src={WishlistIcon} alt='' />
+					</Link>
 				</button>
 				<button>
+					<NavLink to={{ pathname: '/cart', search: '?category=electronic', state: {id: 44} }}
+					    className={ ({ isActive }) => (isActive ? styles.active : '')}>
 						<img src={CartIcon} alt='' />
+					</NavLink>
 				</button>
 				<button>
+				    <NavLink to={{ pathname: '/profile/111' }}
+                        className={ ({ isActive }) => (isActive ? styles.active : '')}>
 				        <img src={UserIcon} alt='' />
+				    </NavLink>
 				</button>
 			</div>
 		</header>

src/components/header/index.module.scss

@@ -53,3 +53,6 @@
 		}
 	}
 }
+    .active {
+        border-bottom: 1px solid red;
+    }

src/components/list/index.jsx

@@ -7,10 +7,11 @@ const ProductList = () => {
 	const [products, setProducts] = React.useState([])
 	const [loading, setLoading] = React.useState(true)
 	const [error, setError] = React.useState(null)
+    console.log("rendred");
     
 	React.useEffect(() => {
 		let cancelled = false
-
+        console.log("useEffect");
 		const getProducts = async () => {
 			try {
 				setLoading(true)
@@ -44,7 +45,7 @@ const ProductList = () => {
 		return () => {
 			cancelled = true
 		}
-	}, [])
+	},[])
 
 	if (loading) {
 		return <div className={styles.loading}>Загрузка продуктов...</div>

src/main.jsx

@@ -1,9 +1,29 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
+import {
+	BrowserRouter as Router,
+	Routes,
+	Route,
+	Navigate, // 1. Импортируем компонент для редиректа
+} from 'react-router-dom'
+
+import Catalog from './pages/catalog'
+import Cart from './pages/cart'
+import About from './pages/about'
+import Login from './pages/login'
+import UserProfile from './pages/profile'
+import Item from './pages/item'
 
 createRoot(document.getElementById('root')).render(
-	<StrictMode>
+	<Router>
-		<App />
+		<Routes>
-	</StrictMode>
+			{/* 2. Добавляем редирект с корневого пути */}
+			<Route path='/' element={<Navigate to='/catalog' replace />} />
+			<Route path='/catalog' element={<Catalog />} />
+			<Route path='/catalog/:id' element={<Item />} />
+			<Route path='/cart' element={<Cart />} />
+			<Route path='/about' element={<About />} />
+			<Route path='/login' element={<Login />} />
+			<Route path='/profile/:id' element={<UserProfile name='Alex' />} />
+		</Routes>
+	</Router>
 )

src/pages/about/index.jsx

@@ -0,0 +1,13 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header/index'
+
+const About = () => {
+	return (
+        <div className={styles.container}>
+			<Header />
+        </div>
+    )
+}
+
+export default About

src/pages/about/index.module.scss

@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}

src/pages/cart/index.jsx

@@ -0,0 +1,13 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header/index'
+
+const Cart = () => {
+	return (
+        <div className={styles.container}>
+			<Header />
+        </div>
+    )
+}
+
+export default Cart

src/pages/cart/index.module.scss

@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}

src/pages/catalog/index.jsx

@@ -0,0 +1,15 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header/index'
+import ProductList from '../../components/list/index'
+
+const Catalog = () => {
+	return (
+		<div className={styles.container}>
+			<Header />
+			<ProductList />
+		</div>
+	)
+}
+
+export default Catalog

src/pages/catalog/index.module.scss

@@ -1,5 +1,3 @@
-@use './assets/styles/variables' as *;
-
 .container {
 	max-width: 1170px;
 	margin: 0 auto;

src/pages/item/index.jsx

@@ -0,0 +1,12 @@
+import styles from './index.module.scss'
+import { useParams } from 'react-router-dom'
+
+const Product = ({ name, price }) => {
+    const { id } = useParams();
+    return ( 
+        <>
+            <h2>Товар {id}. {name} по цене {price   }</h2>
+        </>
+    )
+}
+export default Product

src/pages/login/index.jsx

@@ -0,0 +1,22 @@
+import styles from './index.module.scss'
+import { useNavigate } from 'react-router-dom'
+
+const Login = () => {
+    const navigate = useNavigate();
+    
+    const handleSubmit = formData => {
+        //Какая то логика проверки авторизации
+        navigate('/catalog')
+    }
+    
+    return (
+        <>
+            <h2>Страница авторизации</h2>
+        <form onSubmit={handleSubmit}>
+            <button type="submit">Войти</button>
+        </form>
+        </>
+    )
+}
+
+export default Login

src/pages/profile/index.jsx

@@ -0,0 +1,15 @@
+import styles from './index.module.scss'
+import Header from '../../components/header/index'
+import { useParams } from 'react-router-dom'
+
+
+const UserProfile = ({ name }) => {
+    const { id } = useParams();
+    return (
+        <div className={styles.container}>
+			<Header />
+           <h2>Профиль пользователя {id} {name}</h2>
+        </div>
+    )
+}
+export default UserProfile

src/pages/profile/index.module.scss

@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}