Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить useLocation()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що робить `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()`;
- реакції на зміну маршруту.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати496 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.