useLocation и работа с объектом location

useLocation — это хук из библиотеки React Router, который предоставляет доступ к текущему объекту location. Этот объект содержит информацию о текущем URL и является ключевым инструментом для работы с маршрутизацией на уровне компонентов.

Структура объекта location

Объект location имеет несколько важных свойств:

  • pathname — строка, представляющая путь текущего URL, например /home или /profile/123.
  • search — строка с query-параметрами, начиная с ?, например ?filter=active.
  • hash — часть URL после символа #, например #section1.
  • state — объект, который можно передать при навигации с помощью navigate или <Link> для хранения дополнительных данных между переходами.
  • key — уникальный идентификатор текущей локации, полезный для анимаций и отслеживания изменений маршрута.

Пример использования объекта location:

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

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

  console.log(location.pathname); // "/about"
  console.log(location.search);   // "?tab=info"
  console.log(location.hash);     // "#top"
  console.log(location.state);    // { fromDashboard: true }

  return <div>Текущий путь: {location.pathname}</div>;
}

Query-параметры хранятся в виде строки, но для удобной работы их обычно преобразуют в объект с помощью URLSearchParams:

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

function QueryParamsExample() {
  const location = useLocation();
  const query = new URLSearchParams(location.search);

  const tab = query.get("tab"); // "info"
  const page = query.get("page"); // "2"

  return (
    <div>
      <p>Текущая вкладка: {tab}</p>
      <p>Страница: {page}</p>
    </div>
  );
}

Особенность: при изменении query-параметров объект location изменяется, что позволяет React реагировать на изменения маршрута.

Использование state для передачи данных между маршрутами

С помощью state можно передавать дополнительные данные без отображения их в URL:

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

function Dashboard() {
  return (
    <Link to="/profile" state={{ fromDashboard: true }}>
      Перейти в профиль
    </Link>
  );
}

function Profile() {
  const location = useLocation();
  console.log(location.state); // { fromDashboard: true }

  return <div>Profile, пришли с Dashboard: {location.state?.fromDashboard ? "Да" : "Нет"}</div>;
}

Примечание: значение state сохраняется только в истории браузера, оно не появляется в URL.

Отслеживание изменений маршрута

React Router автоматически перерендеривает компонент при изменении объекта location. Это позволяет строить динамическое поведение в зависимости от пути:

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

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

  useEffect(() => {
    console.log("Путь изменился:", location.pathname);
  }, [location]);

  return <div>Текущий путь: {location.pathname}</div>;
}

Работа с hash

hash используется для внутренних якорей страницы. Пример:

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

function HashExample() {
  const { hash } = useLocation();

  return <div>Текущий hash: {hash}</div>;
}

Можно автоматически прокручивать страницу к элементу с соответствующим id:

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

function ScrollToHash() {
  const { hash } = useLocation();

  useEffect(() => {
    if (hash) {
      const element = document.querySelector(hash);
      if (element) {
        element.scrollIntoView({ beh * avior: "smooth" });
      }
    }
  }, [hash]);

  return null;
}

Советы по использованию useLocation

  1. Хранение состояния маршрута: state удобно использовать для передачи данных между компонентами без видимости в URL.
  2. Работа с query-параметрами: преобразовывать search через URLSearchParams для удобного чтения и обработки.
  3. Реакция на изменения пути: использовать useEffect с зависимостью [location] для выполнения логики при переходе между страницами.
  4. Хеши и якоря: hash позволяет управлять прокруткой и внутренними ссылками на странице.

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

Оглавление