Що робить хук useNavigate()?

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

Що робить `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();

  const handleSubmit = async () => {
    const success = await loginUser();
    if (success) {
      navigate("/profile");
    } else {
      alert("Неправильний логін або пароль");
    }
  };

  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. Він дозволяє:

переходити між маршрутами з коду;

передавати стан при переході;

рухатися по історії вперед/назад;

замінювати поточний маршрут без додавання в історію.

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

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

Premium

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