3️⃣Страница с товаром

1) ⚡Теперь при клике на кнопку show more будем переходить на страницу с товаром.

• Для этого нам понадобится библиотека react-router, которую мы устанавливали ранее

• Идем в туториал и двигаемся по шагам

2) ⚡Первым шагом обернем наше приложение BrowserRouter

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <StrictMode>
      <App />
    </StrictMode>
  </BrowserRouter>,
);

3) ⚡Если в url пустой слеш, тогда отрисуем BestSellers

App.tsx

import "./App.css";
import { Route, Routes } from "react-router";
import { BestSellers } from "./BestSellers.tsx";
import { Header } from "./Header.tsx";

function App() {
  return (
    <div className="appContainer">
      <Header />
      <Routes>
        <Route path="/" element={<BestSellers />} />
      </Routes>
    </div>
  );
}
export default App;

4) ⚡Создадим компонент Product. В tsx в качестве заглушки напишем <h1>Product</h1>

export const Product = () => {
  return (
    <div>
      <h1>Product</h1>
    </div>
  );
};

5) ⚡Если в url будет адрес /product, тогда отрисуем Product

function App() {
  return (
    <div className="appContainer">
      <Header />
      <Routes>
        <Route path="/" element={<BestSellers />} />
        <Route path="/product" element={<Product />} />
      </Routes>
    </div>
  );
}

Теперь в урле давайте руками будем менять роутинг ( / или product) и видеть как отрисовываются разные страницы 💪

6) ⚡Теперь на странице товара сделаем по аналогии еще один запрос на сервер для получения одного товара и положим его тоже в стейт

import axios from "axios";
import { useEffect, useState } from "react";
import type { Product as ProductType } from "./BestSellers.tsx";

export const Product = () => {
  const [product, setProduct] = useState<ProductType | null>(null);

  useEffect(() => {
    axios
      .get("https://masterclass.kimitsu.it-incubator.io/api/products/1")
      .then((res) => {
        const product = res.data;
        setProduct(product);
      });
  }, []);

  return (
    <div>
      <h1>Product</h1>
    </div>
  );
};

7)⚡ Теперь отрисуем полученную информацию о товаре с сервера

Чтобы не тратить время на верстку держите код

import axios from "axios";
import { useEffect, useState } from "react";
import type { Product as ProductType } from "./BestSellers.tsx";
import rating from "./assets/img/rating.svg";
import cartWhite from "./assets/img/cartWhite.svg";

export const Product = () => {
  const [product, setProduct] = useState<ProductType | null>(null);

  useEffect(() => {
    axios
      .get("https://masterclass.kimitsu.it-incubator.io/api/products/8")
      .then((res) => setProduct(res.data));
  }, []);

  if (product === null) {
    return <h2>Продукт еще грузится ...</h2>;
  }

  return (
    <div>
      <div>Заглушка. Понадобится чуть позже. Не удаляйте :)</div>

      <div className="product">
        <img src={product.image} alt="" />
        <div className="info">
          <p className="title">{product.title}</p>
          <p className="price">$ {product.price}</p>
          <div className="rating">
            <p>Rating: {product.rating.rate}</p>
            <img src={rating} alt="" />
          </div>
          <div className="category">
            <span>Category:</span>
            <p>{product.category}</p>
          </div>
          <p className="description">{product.description}</p>
          <button>
            <img src={cartWhite} alt="" />
            Add to cart
          </button>
        </div>
      </div>
    </div>
  );
};

8)⚡ Если все сделали правильно, то должны получить следующий результат 💪