История изменений параметров

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

Параметры маршрута

Параметры маршрута задаются в определении маршрута через двоеточие (:). Например:

<Route path="/users/:userId" element={<UserProfile />} />

В этом случае userId является динамическим параметром, значение которого может меняться в зависимости от URL (/users/1, /users/42 и т.д.). Получить текущие параметры можно с помощью хука useParams:

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

function UserProfile() {
  const { userId } = useParams();
  return <div>Профиль пользователя: {userId}</div>;
}

Отслеживание изменений параметров

React Router не перезагружает компонент при изменении только параметров маршрута, если сам компонент привязан к тому же маршруту. Например, если компонент UserProfile уже смонтирован, переход с /users/1 на /users/2 не вызовет повторного рендера через Route. Для отслеживания изменений параметров необходимо использовать эффект useEffect:

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

function UserProfile() {
  const { userId } = useParams();

  useEffect(() => {
    // Логика при изменении параметра userId
    fetchUserData(userId);
  }, [userId]);

  return <div>Профиль пользователя: {userId}</div>;
}

Здесь массив зависимостей [userId] гарантирует, что эффект будет срабатывать каждый раз при изменении параметра. Это особенно важно для загрузки данных с сервера или обновления состояния компонента в зависимости от параметра.

История навигации и useLocation

Для полного контроля над историей изменений URL и параметров маршрута используется хук useLocation. Он возвращает объект location, который содержит текущий путь, поисковые параметры (search) и хэш (hash):

import { useLocation } from "react-router-dom";
import { useEffect } from "react";

function Logger() {
  const location = useLocation();

  useEffect(() => {
    console.log("URL изменился:", location.pathname, location.search, location.hash);
  }, [location]);

  return null;
}

Любое изменение пути или поисковых параметров вызывает срабатывание эффекта. В сочетании с useParams это позволяет отслеживать любые изменения состояния маршрута, будь то динамические сегменты пути или query-параметры.

Обработка query-параметров

В React Router query-параметры не обрабатываются автоматически через Route и useParams. Для их чтения используется объект URLSearchParams:

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

function SearchPage() {
  const { search } = useLocation();
  const params = new URLSearchParams(search);
  const query = params.get("q");

  return <div>Результаты поиска по: {query}</div>;
}

Чтобы реагировать на изменение query-параметров, useEffect можно привязать к объекту search:

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function SearchPage() {
  const { search } = useLocation();
  const params = new URLSearchParams(search);
  const query = params.get("q");

  useEffect(() => {
    fetchSearchResults(query);
  }, [query]);

  return <div>Результаты поиска по: {query}</div>;
}

Таким образом обеспечивается динамическое обновление данных при любом изменении URL.

История навигации и useNavigate

Для программного изменения параметров и истории используется хук useNavigate:

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

function NavigationButtons() {
  const navigate = useNavigate();

  const goToUser = (userId) => {
    navigate(`/users/${userId}`);
  };

  return <button onCl ick={() => goToUser(5)}>Показать пользователя 5</button>;
}

Этот метод добавляет новое состояние в историю браузера, позволяя возвращаться к предыдущим маршрутам с помощью кнопки «Назад».

Слияние всех подходов

Эффективное отслеживание изменений параметров в React Router достигается комбинацией:

  • useParams для динамических сегментов пути.
  • useLocation для контроля всех изменений URL, включая query-параметры и hash.
  • useEffect для реакции на изменения параметров.
  • useNavigate для программной навигации и управления историей.

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

Оглавление