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

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

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

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

Контент

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

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

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

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

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

## Що робить `useNavigate()`

> `useNavigate()` - це хук, який повертає **функцію** `navigate()`,
> за допомогою якої можна **змінити маршрут (URL)** і **перейти на іншу сторінку** програмно, **без перезавантаження сторінки**.

---

## Приклад базового використання

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

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

function handleLogin() {
    // ... логіка авторизації
    navigate("/dashboard");
  }

return <button onClick={handleLogin}>Увійти</button>;
}
```

Після кліку викликається `navigate("/dashboard")` ->
React Router **змінює URL і рендерить новий компонент** без перезавантаження сторінки.

---

## Навіщо це потрібно

Іноді перехід по посиланню неможливий через `<Link>`,
наприклад:

- після успішного **логіну / реєстрації**;
- після **збереження форми**;
- після **видалення чи створення** ресурсу;
- при **редиректі неавторизованого користувача**.

У таких випадках логіка навігації пишеться прямо в коді - через `useNavigate()`.

---

## Синтаксис

```javascript
const navigate = useNavigate();
navigate(to: string, options?: { replace?: boolean; state?: any });
```

### Параметри:

| Параметр | Тип | Опис |
|---|---|---|
| `to` | `string` | Шлях, на який потрібно перейти (наприклад, `/profile/123`) |
| `replace` | `boolean` | Якщо `true`, замінює поточний URL (не додає новий в історію) |
| `state` | `any` | Дозволяє передати дані в `location.state` (наприклад, прапорці, параметри) |

---

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

### 1. Перехід на інший маршрут

```javascript
navigate("/about");
```

---

### 2. Заміна поточного маршруту (без додавання в історію)

```javascript
navigate("/login", { replace: true });
```

Ця поведінка схожа на `window.location.replace()` -
користувач не зможе повернутися назад кнопкою "Назад".

---

### 3. Перехід з передачею стану

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

Пізніше в цільовому компоненті можна отримати цей стан:

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

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

---

### 4. Навігація "назад" або "вперед"

Можна передавати **число**, щоб рухатися по історії:

```javascript
navigate(-1); // Назад (аналог кнопки "Назад")
navigate(1);  // Вперед
```

---

## Приклад реальної логіки авторизації

```javascript
function LoginForm() {
  const navigate = useNavigate();

return <button onClick={handleSubmit}>Увійти</button>;
}
```

---

## Важливо:

- `useNavigate()` працює **тільки всередині компонентів**,
які знаходяться **всередині** `<Router>` (`BrowserRouter`, `HashRouter`, `MemoryRouter` тощо).
- Якщо викликати `useNavigate()` поза контекстом роутера, буде помилка:

```javascript
  Uncaught Error: useNavigate() may be used only in the context of a <Router>
  ```

---

## Порівняння з іншими способами

| Спосіб | Коли використовувати |
|---|---|
| `<Link to="/page" />` | Для звичайних переходів через JSX (UI) |
| `<Navigate to="/page" />` | Для автоматичного редиректу при рендері |
| `useNavigate()` | Для переходів **з коду / логіки** (після дій користувача, API-запитів тощо) |

---

## Приклад комбінованого сценарію

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

function ProtectedPage() {
  const navigate = useNavigate();
  const isAuth = false; // приклад: користувач не авторизований

if (!isAuth) {
    navigate("/login", { replace: true });
  }

return <h1>Приватна сторінка</h1>;
}
```

Користувач без авторизації буде перенаправлений на `/login`.

---

## Підсумок:

> `useNavigate()` - це хук для **програмного керування навігацією** в React Router.
> Він дозволяє:
>
> - переходити між маршрутами з коду;
> - передавати стан при переході;
> - рухатися по історії вперед/назад;
> - замінювати поточний маршрут без додавання в історію.

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

Для рев’юера

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

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