Програмна навігація

Компоненти Link та NavLink використовують, коли потрібно переміститися за іншим маршрутом при натисканні посилання.

Утім бувають випадки, коли потрібно здійснити переміщення на інший маршрут тільки при виконанні певної послідовності операцій і тільки у разі їх коректного виконання. Наприклад, при натисканні на кнопку авторизації спочатку зробити HTTP-запит на сервер, отримані дані записати в стейт, і тільки після цього у разі успішної авторизації перенаправити користувача на якийсь інший маршрут.

Хук useNavigate

Хук useNavigate надає функцію navigate якій під час виклику передають шлях, куди необхідно виконати навігацію. Цей спосіб імперативний, більш гнучкий і вимагає менше коду.

src/pages/Login.jsx

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

export const Login = () => {
  const navigate = useNavigate();

  const handleSubmit = async values => {
    const response = await FakeAPI.login(values);
    if (response.success) {
      navigate("/profile", { replace: true });
    }
  };

  return (
    <div>
      <h1>Login page</h1>
      <form onSubmit={handleSubmit} >
      // form content
      </form>
    </div>
  );
};

Другий аргумент функції navigate - обʼєкт. Він не обовʼязковий. У ньому є властивість replace яка за замовченням має значення false. Якшо встановити його значення в true, то він перезапише стек історії. Це використовують досить рідко, зазвичай під час проходження через форму авторизації, щоб не можна було повенутися кнопкою "назад" на сторінку авторизації, бо користувач вже авторизований. Утім цей функціонал можна реалізувати й іншими способами, які будуть розглянуті таді в конспекті.

Компонент Navigate

Другий спосіб використання навігації - компонент Navigate. Це - обгортка над хуком useNavigate. Він виконує навігацію в момент рендерингу. Шлях і додаткові параметри передають за допомогою prop. Такий код декларативніший, менш гнучкий і містить більше коду.

src/pages/Login.jsx

import { Navigate, useState } from "react-router-dom";

export const Login = () => {
  const [isLoginSuccess, setIsLoginSuccess] = useState(false);

  const handleSubmit = async values => {
    const response = await FakeAPI.login(values);
    setIsLoginSuccess(response.success);
  };

  if (isLoginSuccess) {
    return <Navigate to="/profile" replace />;
  }

  return (
    <div>
      <h1>Login page</h1>
      <form onSubmit={handleSubmit} >
      // form content
      </form>
    </div>
  );
};

Який спосіб навігації обрати - залежить від задачі та уподобань розробника. Більш вживаний все ж таки - перший варіант.