Как передать параметры через URL в React Router?react-28

В React Router (v6) существует несколько способов передачи параметров через URL. Рассмотрим основные подходы с примерами.

1. Параметры пути

Самый распространенный способ передачи обязательных параметров.

Настройка маршрута:

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

Где :id - динамический параметр

Получение параметра в компоненте:

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

function ProductPage() {
  const { id } = useParams(); // Деструктуризация параметра
  return <div>Товар ID: {id}</div>;
}

Пример URL:

/products/123 → id = "123"

2. Query-параметры

Для необязательных параметров (после знака ?)

Отправка параметров:

<Link to="/search?query=react&page=1">Поиск</Link>

или программно:

navigate('/search?query=react&page=1');

Получение параметров:

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

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('query');
  const page = searchParams.get('page') || 1; // Значение по умолчанию

  return (
    <div>
      Поиск: {query}, Страница: {page}
    </div>
  );
}

Пример URL:

/search?query=react&page=1 → query = "react", page = "1"

3. Состояние location

Для передачи сложных объектов без отображения в URL

Отправка состояния:

<Link
  to="/user"
  state={{
    fromDashboard: true,
    userData: { name: 'Alex' }
  }}
>
  Профиль
</Link>

Получение состояния:

import { useLocation } from 'react-router-dom';

function UserPage() {
  const location = useLocation();
  const { fromDashboard, userData } = location.state || {};

  return (
    <div>
      {fromDashboard && <p>Переход из дашборда</p>}
      {userData?.name && <p>Привет, {userData.name}</p>}
    </div>
  );
}

4. Комбинированный подход

Можно сочетать несколько способов:

// Маршрут
<Route path="/category/:categoryId" element={<CategoryPage />} />

// Навигация
navigate(`/category/${id}?sort=price`, {
  state: { from: 'homepage' }
});

// В компоненте
function CategoryPage() {
  const { categoryId } = useParams();
  const [searchParams] = useSearchParams();
  const { state } = useLocation();

  const sort = searchParams.get('sort');
  const from = state?.from;
}

Важные нюансы:

  1. Типы параметров:

    • Path и Query параметры всегда строки (нужно преобразовывать числа)
    • State может содержать любые данные

  2. Обновление параметров:

    • Для query-параметров используйте setSearchParams
    • Path параметры меняются только при переходе
    • State сохраняется только при навигации

  3. Восстановление состояния:

    • State теряется при перезагрузке страницы
    • Для сохранения используйте localStorage или URL-параметры

Резюмируем

  1. Path параметры (:id) - для обязательных идентификаторов, получаем через useParams
  2. Query параметры (?key=value) - для фильтров/настроек, работаем через useSearchParams
  3. Location state - для скрытой передачи данных между маршрутами, доступ через useLocation
  4. Можно комбинировать все способы для сложных сценариев

Выбор способа зависит от задачи:

  • Видимые идентификаторы → Path параметры
  • Фильтры/настройки → Query параметры
  • Временные данные → Location state

Вопросы

Собеседования