Динамічні маршрути

npm install react-router-dom

<Route path="/products/:productId" element={<ProductPage />} />

/products/1
/products/25
/products/abc

const params = useParams();
console.log(params.productId);

const { productId } = useParams();

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

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

import { Link, Route, Routes, useParams } from "react-router-dom";

const products = [
  {
    id: 1,
    name: "Клавіатура",
    price: 2500,
    description: "Механічна клавіатура для роботи та ігор."
  },
  {
    id: 2,
    name: "Миша",
    price: 1200,
    description: "Бездротова миша з точним сенсором."
  },
  {
    id: 3,
    name: "Навушники",
    price: 3200,
    description: "Навушники із шумозаглушенням."
  }
];

function HomePage() {
  return (
    <main>
      <h1>Головна сторінка</h1>
      <p>Виберіть товар зі списку.</p>

      <Link to="/products">Переглянути товари</Link>
    </main>
  );
}

function ProductsPage() {
  return (
    <main>
      <h1>Товари</h1>

      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <Link to={`/products/${product.id}`}>
              {product.name}
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

function ProductPage() {
  const { productId } = useParams();

  const product = products.find(
    (item) => item.id === Number(productId)
  );

  if (!product) {
    return (
      <main>
        <h1>Товар не знайдено</h1>
        <Link to="/products">Повернутися до списку товарів</Link>
      </main>
    );
  }

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Ціна: {product.price} грн</p>

      <Link to="/products">Повернутися до списку товарів</Link>
    </main>
  );
}

function NotFoundPage() {
  return (
    <main>
      <h1>Сторінку не знайдено</h1>
      <Link to="/">На головну</Link>
    </main>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/products" element={<ProductsPage />} />
      <Route path="/products/:productId" element={<ProductPage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}

export default App;

/products/1
/products/2
/products/3

<Route path="/products/:productId" element={<ProductPage />} />

/products/2

const { productId } = useParams();

"2"

const product = products.find(
  (item) => item.id === Number(productId)
);

<Link to={`/products/${product.id}`}>
  {product.name}
</Link>

/products/2

<Route
  path="/categories/:categoryId/products/:productId"
  element={<ProductPage />}
/>

/categories/5/products/12

const { categoryId, productId } = useParams();

categoryId === "5"
productId === "12"

/products/:productId

/products/

:productId

/users/:userId/orders/:orderId

<Route path="/products/productId" element={<ProductPage />} />

/products/productId

<Route path="/products/:productId" element={<ProductPage />} />

<Route path="/products/:productId" element={<ProductPage />} />

const { productId } = useParams();

const { id } = useParams();

const { productId } = useParams();

console.log(typeof productId); // "string"

const product = products.find(
  (item) => item.id === Number(productId)
);

/products/999

if (!product) {
  return <p>Товар не знайдено</p>;
}

function ProductPage() {
  const { productId } = useParams();

  return <h1>Товар: {productId}</h1>;
}

/articles/:articleId