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

Question

[nicknamecsharp]

Помогите разобраться, почему не происходит переход на /main и как это исправить

Код компонента 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;

Код main.jsx

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>,
)

Answer 1

[szQocks]

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;