Различия

Показаны различия между двумя версиями страницы.

--- xuk_usenavigate [2024/04/04 17:01]
tro создано
+++ xuk_usenavigate [2024/04/30 18:40] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Хук 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** - використовується для того щоб в історії навігатора не було можливості повернутися на попередню сторінку