Хук useNavigate

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

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>
      <LoginForm onSubmit={handleSubmit} />
    </div>
  );
};