Хук 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>
);
};

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

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