如何正确登录后在页面上进行重定向？

Question

我正在尝试在成功登录后重定向用户。我这样做了，但它不起作用。 请帮忙，我该如何解决这个错误或者我怎样才能做得更好？

main.jsx

登录.jsx

    imports ...

    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) { 
                    setLoginClass('is-invalid'); 
                }

                if (!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">
                ...
                                <input
                                    type="text"
                                    className={`form-control ${loginClass}`}
                                    id="login"
                                    placeholder="Login"
                                    value={login}
                                    onChange={(evt) => { setLogin(evt.target.value) }}
                                />
                                ...
                                <input
                                    type="password"
                                    className={`form-control ${passwordClass}`}
                                    id="password"
                                    placeholder="Password"
                                    value={password}
                                    onChange={(evt) => { setPassword(evt.target.value) }}
                                />
                            <button className="w-100 btn btn-lg btn-primary" onClick={submit}>Enter</button>
                        </form>
                    </div>
                </div>
            </div>
        );
    }

    export default Login;

（添加更多细节）

Lorem ipsum dolor sat amet consectetur adipisicing elit。 Hic，sed 的后果是要面对指控，以安抚前莫迪的腐败行为吗？一切都相似，建筑师的时间是痛苦的，而身体却是痛苦的。 Saepe，amet 阻碍 ducimus atque modi，ea debitis Labore Fuga in dolorum，quia quis praesentium consequatur。 Lorem ipsum dolor sat amet consectetur adipisicing elit。 Hic，sed 的后果是要面对指控，以安抚前莫迪的腐败行为吗？一切都相似，建筑师的时间是痛苦的，而身体却是痛苦的。 Saepe, amet 阻碍 ducimus atque modi, ea debitis laboure fuga in dolorum, quia quis praesentium consequatur.Lorem ipsum dolor sat amet consectetur adipisicing elit。 Hic，sed 的后果是要面对指控，以安抚前莫迪的腐败行为吗？一切都相似，建筑师的时间是痛苦的，而身体却是痛苦的。 Saepe，amet 阻碍 ducimus atque modi，ea debitis Labore Fuga in dolorum，quia quis praesentium consequatur。

Answer 1

在 React 应用程序中实现导航的方法之一是使用

useNavigate

 中的 

react-router-dom

钩子

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

在提交功能中修改此条件

  if (data.status == 200) {
    console.log("entered successfully");
    navigate("/main");
    setIsLoggedIn(true);
  } else {
    console.log("could not enter");
  }