URL-параметри

Уявімо сайт інтернет-магазину і його сторінку всіх товарів на якій рендериться перелік всіх товарів

https://mysite.com/products

В такому разі при натисканні на один конкретний товар ми хочемо перейти на сторінку цього товару, яка виглядатиме так:

https://mysite.com/products/products-page-1

Для кожного конкретного товару буде братися з бази даних свій контент і рендеритися унікальна сторінка товару. В цьому випадку назва конкретного товару (або id) в адресному рядку браузера буде динамічним параметром. Його назва однакова, а от значення будуть різні. Це як функція, яка приймає параметр з однією назвою, але різними значеннями та проводить подальші дії з отриманим значенням параметру.

За допомогою динамічних параметрів можна оголосити шаблон адреси, частина якого матиме довільне значення. В такому разі структура сторінки буде однакова, тільки вміст (текст, підписи, зображення) динамічно мінятиметься в залежності від параметру в адресному рядку. Щоб не робити тисячі маршрутів для кожної такої сторінки, робиться один маршрут і з описом динамічного параметру.

Щоб вказати змінну частину в URL перед іменем параметра ставлять символ двокрапку (:).

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

Тут productId - зміна частина. В залежності від того, який параметр буде передано в адресному рядку і завантажується відповідна сторінка. Наприклад /products/iphone-14 або /products/samsung-android.

Імʼя URL-параметра може бути довільним, але воно має бути зрозумілим та описовим.

Розглянемо приклад сайту раніше згадуваної веб-студії, де кожен приклад виконаного проєкту буде рендеритися за унікальним динамічним параметром

App.jsx

import { Routes, Route, Link } from "react-router-dom";
import Home from "path/to/pages/Home";
import About from "path/to/pages/About";
import Reviews from "path/to/pages/Reviews";
import Works from "path/to/pages/Works";
import NotFound from "path/to/pages/NotFound";
import WorkDetails from "path/to/pages/WorkDetails";

export const App = () => {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/reviews">Reviews</Link>
        <Link to="/works">Works</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/reviews" element={<Reviews />} />
        <Route path="/works" element={<Works />} />
        <Route path="/works/:workId" element={<WorkDetails />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}; 

Значення параметра повинно бути унікальне. Зазвичай для його формування використовують якийсь лічильники з бази даних. Якшо ви зочете використовувати описове значення, то при його створенні у базі даних або обʼєкті потрібно перевіряти чи воно не повторюється.

/works/1, /works/2 або /works/shoes-shop, /works/barber-shop

Хук useParams​

Хук useParams повертає об'єкт з усіма динамічними параметрами, які є в поточному URL. Імʼя параметра буде іменем властивості, а його значення - таке як в адресному рядку. До прикладу розглянемо вище описаний маршрут

App.jsx

<Route path="/works/:workId" element={<WorkDetails />} />

Щоб у компоненті <WorkDetails /> зрендерити унікальний контент за динамічним параметром workId, переданим в адресному рядку використаємо хук useParams.

src/pages/WorkDetails.jsx

import { useParams } from "react-router-dom";

const WorkDetails = () => {
  const { workId } = useParams();
  console.log('workId: ', workId); // виведемо в консоль отримане значення
  
  return <div>Id of the work page: {workId}</div>;
};

export default WorkDetails;

Маючи значення параметра можна зробити запит на бекенд та отримати повну інформацію про приклад цієї роботи за її id. А після цього підверстати дані на сторінці.

Може передаватися через URL кілька параметрів. Наприклад для вибірки якогось товару за фірмою і кольором. Розглянемо такий маршрут: /product/:developer/:color. І, наприклад в адресному рядку браузера буде /product/samsung/red

const { developer, color } = useParams();
console.log('developer: ', developer); // samsung
console.log('color: ', color); // red

Нижче наведено живий приклад навігації з отриманням динамічних параметрів. На сторінці Works можна пройти за посиланням через яке передається динамічний параметр і в компоненті WorkDetails ми його отримуємо і показуємо користувачу. Щоб розібратися краще - відкрийте код прикладу.