Хук 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> ); };
replace - використовується для того щоб в історії навігатора не було можливості повернутися на попередню сторінку