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

package-lock.json

@@ -11,7 +11,7 @@
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
 				"react-icons": "^5.5.0",
-				"react-router-dom": "^7.6.3",
+				"react-router-dom": "^7.15.1",
 				"sass-embedded": "^1.89.2"
 			},
 			"devDependencies": {
@@ -1622,12 +1622,16 @@
 			"license": "MIT"
 		},
 		"node_modules/cookie": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-			"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+			"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": {
@@ -2516,9 +2520,9 @@
 			}
 		},
 		"node_modules/react-router": {
-			"version": "7.6.3",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.3.tgz",
-			"integrity": "sha512-zf45LZp5skDC6I3jDLXQUu0u26jtuP4lEGbc7BbdyxenBN1vJSTA18czM2D+h5qyMBuMrD+9uB+mU37HIoKGRA==",
+			"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",
@@ -2538,12 +2542,12 @@
 			}
 		},
 		"node_modules/react-router-dom": {
-			"version": "7.6.3",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.3.tgz",
-			"integrity": "sha512-DiWJm9qdUAmiJrVWaeJdu4TKu13+iB/8IEi0EW/XgaHCjW/vWGrwzup0GVvaMteuZjKnh5bEvJP/K0MDnzawHw==",
+			"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.6.3"
+				"react-router": "7.15.1"
 			},
 			"engines": {
 				"node": ">=20.0.0"
@@ -2947,9 +2951,9 @@
 			}
 		},
 		"node_modules/set-cookie-parser": {
-			"version": "2.7.1",
-			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
-			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+			"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": {

package.json

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

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}>
-				<h4>{name}</h4>
+				<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,7 +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 } from 'react-router-dom'
+import { Link, NavLink } from 'react-router-dom'
 
 const Header = () => {
 	return (
@@ -13,16 +13,22 @@ const Header = () => {
 			<nav>
 				<ul>
 					<li>
-						<Link to={{ pathname: '/' }}>Home</Link>
+						<NavLink to={{ pathname: '/' }}
+						    className={ ({ isActive }) => (isActive ? styles.active : '')}>
+						    Главная
+						</NavLink>
 					</li>
 					<li>
-						<Link to={{ pathname: '/contact' }}>Contact</Link>
+						<Link to={{ pathname: '/contact' }}>Контакты</Link>
 					</li>
 					<li>
-						<Link to={{ pathname: '/about' }}>About</Link>
+						<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>
@@ -37,12 +43,16 @@ const Header = () => {
 					</Link>
 				</button>
 				<button>
-					<Link to={{ pathname: '/cart' }}>
+					<NavLink to={{ pathname: '/cart', search: '?category=electronic', state: {id: 44} }}
+					    className={ ({ isActive }) => (isActive ? styles.active : '')}>
 						<img src={CartIcon} alt='' />
-					</Link>
+					</NavLink>
 				</button>
 				<button>
-					<img src={UserIcon} alt='' />
+				    <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

@@ -8,6 +8,10 @@ import {
 
 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(
 	<Router>
@@ -15,7 +19,11 @@ createRoot(document.getElementById('root')).render(
 			{/* 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

@@ -1,5 +1,13 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header/index'
+
 const Cart = () => {
-	return <></>
+	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/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;
+}