Различия

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

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