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

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}>
-				<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,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>
-					<img src={WishlistIcon} alt='' />
+					<Link to={{ pathname: '/wishlist' }}>
+						<img src={WishlistIcon} alt='' />
+					</Link>
 				</button>
 				<button>
-					<img src={CartIcon} alt='' />
+					<NavLink to={{ pathname: '/cart', search: '?category=electronic', state: {id: 44} }}
+					    className={ ({ isActive }) => (isActive ? styles.active : '')}>
+						<img src={CartIcon} alt='' />
+					</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

@@ -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;
+}