Що робить useLocation()?

ReactJunior~1 хв читання

Що робить `useLocation()`

useLocation() повертає об'єкт location, який містить інформацію про поточний маршрут (URL): шлях, query-параметри, стан тощо.

Це аналог об'єкта window.location, але в контексті React Router, який оновлюється при кожній зміні маршруту і працює без перезавантаження сторінки.

Приклад використання

javascript

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

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

  console.log(location);

  return (
    <div>
      <p>Поточний шлях: {location.pathname}</p>
      <p>Query рядок: {location.search}</p>
      <p>Hash: {location.hash}</p>
    </div>
  );
}

Якщо URL буде таким:

javascript

https://example.com/products?id=42#details

То useLocation() поверне об'єкт:

javascript

{
  pathname: "/products",
  search: "?id=42",
  hash: "#details",
  state: undefined,
  key: "a1b2c3" // унікальний ключ маршруту
}

Структура об'єкта `location`

Властивість	Опис	Приклад
`pathname`	Шлях без домену	`"/profile/123"`
`search`	Query-параметри (все після `?`)	`"?sort=asc&page=2"`
`hash`	Якір (все після `#`)	`"#section-3"`
`state`	Довільні дані, передані при `navigate()`	`{ fromCart: true }`
`key`	Унікальний ідентифікатор запису в історії	`"xy12ab"`

Приклад зі станом `state`

Якщо при навігації ти передав дані:

javascript

navigate("/checkout", { state: { fromCart: true } });

То в цільовому компоненті можна отримати їх через useLocation():

javascript

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

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

Це зручно для передачі даних між сторінками без query-параметрів.

Приклад динамічного використання

Можна, наприклад, підсвічувати активне посилання:

javascript

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

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

  return (
    <nav>
      <Link
        to="/home"
        className={location.pathname === "/home" ? "active" : ""}
      >
        Головна
      </Link>
      <Link
        to="/about"
        className={location.pathname === "/about" ? "active" : ""}
      >
        Про нас
      </Link>
    </nav>
  );
}

При зміні маршруту React Router автоматично оновить об'єкт location, що викличе перерендер і змінить активне посилання.

Коли `useLocation()` особливо корисний

Сценарій	Навіщо потрібен
Відстежувати поточний маршрут	Для підсвічування активних посилань, breadcrumbs
Отримувати дані, передані через `navigate(state)`	Для контексту переходу (наприклад, звідки прийшов користувач)
Розбирати query-параметри	Наприклад, `?page=2&sort=asc`
Реагувати на зміну маршруту	Для аналітики, анімацій, скидання стану тощо

Приклад з React.useEffect

javascript

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

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return null;
}

Компонент автоматично прокручуватиме сторінку вгору при кожному переході на новий маршрут.

Важливо пам'ятати:

useLocation() працює лише всередині <Router> (BrowserRouter, HashRouter, MemoryRouter тощо).
Він перерендерює компонент при кожній зміні шляху.
Це читання стану навігації, а не інструмент для зміни маршруту (для цього є useNavigate()).

Підсумок:

useLocation() - це хук, який дозволяє отримати поточні дані маршруту: шлях (pathname), параметри (search, hash) і стан (state).

Використовується для:

отримання інформації про поточний URL;
роботи з query-параметрами;
читання даних, переданих через navigate();
реакції на зміну маршруту.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.