Множественные значения параметров

React Router предоставляет гибкий механизм работы с параметрами маршрутов, позволяя передавать и извлекать значения, которые динамически влияют на отображение компонентов. Одним из продвинутых сценариев является использование множественных значений параметров, что особенно важно при построении фильтров, пагинации и сложных URL-структур.

Динамические сегменты маршрута

Маршруты с параметрами создаются с помощью синтаксиса :paramName в path компонента Route. Пример:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import ProductPage from "./ProductPage";

<Router>
  <Routes>
    <Route path="/products/:category/:id" element={<ProductPage />} />
  </Routes>
</Router>

Здесь :category и :id — это два динамических сегмента. При переходе по URL /products/electronics/42 компонент ProductPage получит доступ к значениям category = "electronics" и id = "42".

Доступ к множественным параметрам через `useParams`

React Router предоставляет хук useParams, который возвращает объект со всеми текущими параметрами маршрута:

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

function ProductPage() {
  const { category, id } = useParams();
  
  return (
    <div>
      <h1>Категория: {category}</h1>
      <p>ID товара: {id}</p>
    </div>
  );
}

Особенность: хук useParams всегда возвращает строковые значения, даже если URL содержит числа. При необходимости нужно явно преобразовать их в числа через parseInt или Number.

Передача и парсинг множественных значений в одном параметре

Иногда требуется передавать несколько значений в одном сегменте маршрута. Для этого часто используют разделители, например, запятую:

<Route path="/products/:ids" element={<MultipleProducts />} />

URL: /products/1,2,3,4

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

function MultipleProducts() {
  const { ids } = useParams();
  const productIds = ids.split(",").map(id => parseInt(id, 10));

  return (
    <div>
      {productIds.map(id => (
        <p key={id}>Товар ID: {id}</p>
      ))}
    </div>
  );
}

Такой подход позволяет хранить список значений в одном параметре, при этом обеспечивается простота навигации и генерации ссылок.

Использование query-параметров для множественных значений

Query-параметры (?key=value) удобны для фильтров и множественных значений без усложнения маршрутов. React Router предоставляет хук useSearchParams для их обработки:

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

function FilteredProducts() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const categories = searchParams.getAll("category"); // ['electronics', 'books']
  const sort = searchParams.get("sort"); // 'price'

  return (
    <div>
      <h2>Фильтры:</h2>
      <p>Категории: {categories.join(", ")}</p>
      <p>Сортировка: {sort}</p>
    </div>
  );
}

Особенность: метод getAll возвращает массив всех значений одного ключа, что делает его идеальным для множественных фильтров, например: /products?category=electronics&category=books.

Генерация ссылок с множественными параметрами

Для маршрутов с множественными значениями можно использовать Link или useNavigate:

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

const selectedIds = [1, 2, 3];
<Link to={`/products/${selectedIds.join(",")}`}>Показать выбранные товары</Link>

Для query-параметров:

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

function setFilters() {
  const [searchParams, setSearchParams] = useSearchParams();
  setSearchParams({ category: ["electronics", "books"], sort: "price" });
}

React Router автоматически корректно сериализует массив значений в query-параметры.

Вложенные маршруты и множественные параметры

React Router позволяет комбинировать множественные динамические сегменты с вложенными маршрутами:

<Routes>
  <Route path="/users/:userId" element={<UserProfile />}>
    <Route path="posts/:postId" element={<UserPost />} />
  </Route>
</Routes>

Доступ к параметрам:

function UserPost() {
  const { userId, postId } = useParams();
  return <p>User {userId}, Post {postId}</p>;
}

При этом параметры из родительского маршрута автоматически доступны дочерним компонентам.