Почему не происходит Navigate?

import React, { useState } from 'react'; import { Navigate } from "react-router-dom"; import axios from 'axios'; import './login.css';  function Login() {     const [login, setLogin] = useState('');     const [password, setPassword] = useState('');     const [loginClass, setLoginClass] = useState('');     const [passwordClass, setPasswordClass] = useState('');      const [isLoggedIn, setIsLoggedIn] = useState(false);      const submit = async (evt) => {         evt.preventDefault(); // Предотвращаем отправку формы         console.log(login, password);         if (login.length === 0 || password.length === 0) {             console.log('stop')             if (!login) { // Проверяем, не пустое ли поле login                 setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно             }              if (!password) { // Проверяем, не пустое ли поле password                 setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно             }         } else {             console.log('req')             await axios                 .post('http://localhost:5000/test/auth/login', {                     login: login,                     password: password                 })                 .then((response) => {                     console.log(response);                     const { data } = response;                     if (data.status == 200) {                         console.log('entered successfully');                          // Здесь изменяется состояние                          setIsLoggedIn(true);                     } else {                         console.log('could not enter');                     }                 })                 .catch((error) => {                     console.log(error);                 });              setPassword('');             setLogin('');             setLoginClass('');             setPasswordClass('');         }         // тут должен происходить переход         if (isLoggedIn) {             return <Navigate to="/main" replace={true}/>         }         return     };      return (         <div className="container col-xl-10 col-xxl-8 px-4 py-5">             <div className="row align-items-center g-lg-5 py-5">                 <div className="col-lg-7 text-center text-lg-start ">                     <h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1>                     <p className="col-lg-10 fs-4">                         Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti!                     </p>                 </div>                 <div className="col-md-10 mx-auto col-lg-5">                     <form className="p-4 p-md-5 border rounded-3 bg-body-tertiary">                         <h2 className="mb-4">Вход</h2>                         <div className="form-floating mb-3">                             <input                                 type="text"                                 className={`form-control ${loginClass}`}                                 id="login"                                 placeholder="Введите логин"                                 value={login}                                 onChange={(evt) => { setLogin(evt.target.value) }}                             />                             <label htmlFor="login">Логин</label>                         </div>                         <div className="form-floating mb-3">                             <input                                 type="password"                                 className={`form-control ${passwordClass}`}                                 id="password"                                 placeholder="Введите пароль"                                 value={password}                                 onChange={(evt) => { setPassword(evt.target.value) }}                             />                             <label htmlFor="password">Пароль</label>                         </div>                         <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button>                     </form>                 </div>             </div>         </div>     ); }  export default Login;

import React, { useState } from 'react'; import { Navigate } from "react-router-dom"; import axios from 'axios'; import './login.css'; function Login() { const [login, setLogin] = useState(''); const [password, setPassword] = useState(''); const [loginClass, setLoginClass] = useState(''); const [passwordClass, setPasswordClass] = useState(''); const [isLoggedIn, setIsLoggedIn] = useState(false); const submit = async (evt) => { evt.preventDefault(); // Предотвращаем отправку формы console.log(login, password); if (login.length === 0 || password.length === 0) { console.log('stop') if (!login) { // Проверяем, не пустое ли поле login setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } if (!password) { // Проверяем, не пустое ли поле password setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } } else { console.log('req') await axios .post('http://localhost:5000/test/auth/login', { login: login, password: password }) .then((response) => { console.log(response); const { data } = response; if (data.status == 200) { console.log('entered successfully'); // Здесь изменяется состояние setIsLoggedIn(true); } else { console.log('could not enter'); } }) .catch((error) => { console.log(error); }); setPassword(''); setLogin(''); setLoginClass(''); setPasswordClass(''); } // тут должен происходить переход if (isLoggedIn) { return <Navigate to="/main" replace={true}/> } return }; return ( <div className="container col-xl-10 col-xxl-8 px-4 py-5"> <div className="row align-items-center g-lg-5 py-5"> <div className="col-lg-7 text-center text-lg-start "> <h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1> <p className="col-lg-10 fs-4"> Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti! </p> </div> <div className="col-md-10 mx-auto col-lg-5"> <form className="p-4 p-md-5 border rounded-3 bg-body-tertiary"> <h2 className="mb-4">Вход</h2> <div className="form-floating mb-3"> <input type="text" className={`form-control ${loginClass}`} id="login" placeholder="Введите логин" value={login} onChange={(evt) => { setLogin(evt.target.value) }} /> <label htmlFor="login">Логин</label> </div> <div className="form-floating mb-3"> <input type="password" className={`form-control ${passwordClass}`} id="password" placeholder="Введите пароль" value={password} onChange={(evt) => { setPassword(evt.target.value) }} /> <label htmlFor="password">Пароль</label> </div> <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button> </form> </div> </div> </div> ); } export default Login;

import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import Login from './pages/login-page/Login' import {   createBrowserRouter,   RouterProvider, } from "react-router-dom";  const router = createBrowserRouter([   {     path: "/",     element: <Login />,   },   {     path: "/main",     element: <div>Main Page</div>   } ]);  ReactDOM.createRoot(document.getElementById('root')).render(   <React.StrictMode>     {/* <Login /> */}     <RouterProvider router={router} />   </React.StrictMode>, )

import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import Login from './pages/login-page/Login' import { createBrowserRouter, RouterProvider, } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: <Login />, }, { path: "/main", element: <div>Main Page</div> } ]); ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> {/* <Login /> */} <RouterProvider router={router} /> </React.StrictMode>, )

import React, { useState } from 'react'; import { Navigate } from "react-router-dom"; import axios from 'axios'; import './login.css';  function Login() {     const [login, setLogin] = useState('');     const [password, setPassword] = useState('');     const [loginClass, setLoginClass] = useState('');     const [passwordClass, setPasswordClass] = useState('');      const [isLoggedIn, setIsLoggedIn] = useState(false);      const submit = async (evt) => {         evt.preventDefault(); // Предотвращаем отправку формы         console.log(login, password);         if (login.length === 0 || password.length === 0) {             console.log('stop')             if (!login) { // Проверяем, не пустое ли поле login                 setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно             }              if (!password) { // Проверяем, не пустое ли поле password                 setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно             }         } else {             console.log('req')             await axios                 .post('http://localhost:5000/test/auth/login', {                     login: login,                     password: password                 })                 .then((response) => {                     console.log(response);                     const { data } = response;                     if (data.status == 200) {                         console.log('entered successfully');                          // Здесь изменяется состояние                          setIsLoggedIn(true);                     } else {                         console.log('could not enter');                     }                 })                 .catch((error) => {                     console.log(error);                 });              setPassword('');             setLogin('');             setLoginClass('');             setPasswordClass('');         }     };      if (isLoggedIn) {          return <Navigate to="/main" replace={true}/>     }      return (         <div className="container col-xl-10 col-xxl-8 px-4 py-5">             <div className="row align-items-center g-lg-5 py-5">                 <div className="col-lg-7 text-center text-lg-start ">                     <h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1>                     <p className="col-lg-10 fs-4">                         Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti!                     </p>                 </div>                 <div className="col-md-10 mx-auto col-lg-5">                     <form className="p-4 p-md-5 border rounded-3 bg-body-tertiary">                         <h2 className="mb-4">Вход</h2>                         <div className="form-floating mb-3">                             <input                                 type="text"                                 className={`form-control ${loginClass}`}                                 id="login"                                 placeholder="Введите логин"                                 value={login}                                 onChange={(evt) => { setLogin(evt.target.value) }}                             />                             <label htmlFor="login">Логин</label>                         </div>                         <div className="form-floating mb-3">                             <input                                 type="password"                                 className={`form-control ${passwordClass}`}                                 id="password"                                 placeholder="Введите пароль"                                 value={password}                                 onChange={(evt) => { setPassword(evt.target.value) }}                             />                             <label htmlFor="password">Пароль</label>                         </div>                         <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button>                     </form>                 </div>             </div>         </div>     ); }  export default Login;

import React, { useState } from 'react'; import { Navigate } from "react-router-dom"; import axios from 'axios'; import './login.css'; function Login() { const [login, setLogin] = useState(''); const [password, setPassword] = useState(''); const [loginClass, setLoginClass] = useState(''); const [passwordClass, setPasswordClass] = useState(''); const [isLoggedIn, setIsLoggedIn] = useState(false); const submit = async (evt) => { evt.preventDefault(); // Предотвращаем отправку формы console.log(login, password); if (login.length === 0 || password.length === 0) { console.log('stop') if (!login) { // Проверяем, не пустое ли поле login setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } if (!password) { // Проверяем, не пустое ли поле password setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно } } else { console.log('req') await axios .post('http://localhost:5000/test/auth/login', { login: login, password: password }) .then((response) => { console.log(response); const { data } = response; if (data.status == 200) { console.log('entered successfully'); // Здесь изменяется состояние setIsLoggedIn(true); } else { console.log('could not enter'); } }) .catch((error) => { console.log(error); }); setPassword(''); setLogin(''); setLoginClass(''); setPasswordClass(''); } }; if (isLoggedIn) { return <Navigate to="/main" replace={true}/> } return ( <div className="container col-xl-10 col-xxl-8 px-4 py-5"> <div className="row align-items-center g-lg-5 py-5"> <div className="col-lg-7 text-center text-lg-start "> <h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1> <p className="col-lg-10 fs-4"> Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti! </p> </div> <div className="col-md-10 mx-auto col-lg-5"> <form className="p-4 p-md-5 border rounded-3 bg-body-tertiary"> <h2 className="mb-4">Вход</h2> <div className="form-floating mb-3"> <input type="text" className={`form-control ${loginClass}`} id="login" placeholder="Введите логин" value={login} onChange={(evt) => { setLogin(evt.target.value) }} /> <label htmlFor="login">Логин</label> </div> <div className="form-floating mb-3"> <input type="password" className={`form-control ${passwordClass}`} id="password" placeholder="Введите пароль" value={password} onChange={(evt) => { setPassword(evt.target.value) }} /> <label htmlFor="password">Пароль</label> </div> <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button> </form> </div> </div> </div> ); } export default Login;