Показать страницуИстория страницыСсылки сюдаODT преобразованиеНаверх Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно. ====== Хук useNavigate ====== React Router дозволяє виконати навігацію не тільки при натисканні на Link, але й щодо певної дії користувача, події чи ефекту. Наприклад, при натискання на кнопку, після відправлення форми, за результатом HTTP-запиту і тому подібне. Наприклад використовуємо процес логіна користувача в додаток. Після надсилання форми на сторінці логіну ми виконуємо навігацію на сторінку профілю користувача, але тільки якщо HTTP-запит був успішним. <code> 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> ); }; </code> Другий спосіб це компонент Navigate - обгортка над хуком useNavigate. Він виконує навігацію у момент рендеру. Шлях для навігації та необов'язкові параметри передаються окремими пропсами. Такий спосіб більш декларативний, але менш гнучкий і вимагає більше коду. <code> 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> ); }; </code> **replace** - використовується для того щоб в історії навігатора не було можливості повернутися на попередню сторінку /sites/data/pages/xuk_usenavigate.txt Последнее изменение: 2024/04/30 18:40 — tro