历史推送不会重定向到反应组件

问题描述

我试图找出发生了什么，但没有成功。我在互联网上搜索了许多主题，但一无所获，绝对没有任何帮助。

我一直在用 ReactJS 开发一个项目，在那里我有一个登录页面（使用 Context API），当我向后端提交登录表单时，如果身份验证成功，它会在标头中返回一个 JWT 令牌，然后，组件应该重定向到“/home”页面。

我知道 history v.5 无法与 ReactJS 一起正常工作的问题，但我已经将版本更改为 ^4.10.1，但问题仍然存在。

这里有一些代码：

HistoryDe​​faults.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

登录/Hooks.js

import { useEffect,useState } from 'react';

import api from '../../defaults/AxiosDefaults';
import history from '../../defaults/HistoryDefaults';

import { login } from '../../services/AxiosService';

export default function LoginHooks(){
    const [username,setUsername] = useState('');
    const [password,setPassword] = useState('');
    const [authenticated,setAuthenticated] = useState(false);
    const [loading,setLoading] = useState(true);
    const [invalidClass,setInvalidClass] = useState('');

    useEffect(() => {
        const token = localStorage.getItem('Token');

        if (token) {
            api.defaults.headers.Authorization = JSON.parse(token);
            setAuthenticated(true);
        }

        setLoading(false);
    },[]);

    async function handleLogin(e) {
        e.preventDefault();

        await login({ username,password })
            .then(result => {
                const token = result.headers.authorization;

                localStorage.setItem('Token',JSON.stringify(token));
                api.defaults.headers.Authorization = token;
                setAuthenticated(true);

                history.push('/home');
            }).catch(err => {
                setInvalidClass('is-invalid');
            })
    }

    function handleLogout() {
        setAuthenticated(false);
        localStorage.removeItem('Token');
        api.defaults.headers.Authorization = undefined;
        
        setUsername('');
        setPassword('');
        
        history.push('/');
    }

    function handleUsernameChange(e) {
        const username = e.target.value;
        setUsername(username);
    }

    function handlePasswordChange(e) {
        const password = e.target.value;
        setPassword(password);
    }

    return {
        username,password,authenticated,loading,invalidClass,handleLogin,handleLogout,handlePasswordChange,handleUsernameChange
    }
}

登录/Login.js

import React from 'react';

import LoginHooks from './Hooks';

import Header from '../commons/Header';

export default function Login() {

    const {username,handleUsernameChange,handlePasswordChange} = LoginHooks();

    return (
        <div className="container min-vh-100">
            <div className="d-flex min-vh-100 justify-content-center align-items-center">
                <div className="p-3 border w-50 rounded-lg">
                    <Header />
                    <hr />
                    {
                        invalidClass ? <div className="alert alert-danger text-center" role="alert">Bad Credentials</div> : <div></div>
                    }
                    <form onSubmit={handleLogin}>
                        <div className="form-group">
                            <label htmlFor="username">Username</label>
                            <input
                                type="text"
                                className={invalidClass + " form-control"}
                                name="username"
                                onChange={handleUsernameChange}
                                value={username}
                            />
                        </div>
                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <input
                                type="password"
                                className={invalidClass + " form-control"}
                                name="password"
                                onChange={handlePasswordChange}
                                value={password}
                            />
                        </div>
                        <div className="form-group form-check">
                        </div>
                        <div className="from-group">
                            <button type="submit" className="btn btn-info form-control">Login</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
}

contexts/AuthContext.js

import React,{ createContext } from 'react';

import LoginHooks from '../components/login/Hooks';

const Context = createContext();

function AuthProvider({ children }) {

    const { loading,handleLogout } = LoginHooks();

    return (
        <Context.Provider value={{ loading,handleLogout }}>
            {children}
        </Context.Provider>
    );
}

export { Context,AuthProvider };

路由/CustomRoute.js

import React,{ useContext } from 'react';

import Home from '../home/Home';
import Login from '../login/Login';

import { Context } from '../../contexts/AuthContext';
import { Redirect,Route,Switch } from 'react-router-dom';

function CustomRoute({ isPrivate,...rest }) {
    const { loading,authenticated } = useContext(Context);

    if(loading){
        return <h1>Loading...</h1>
    }

    if(isPrivate && !authenticated) {
        return <Redirect to="/" />
    }

    return <Route {...rest} />

}

export default function Routes() {
    return (
        <Switch>
            <CustomRoute exact path="/" component={Login} />
            <CustomRoute isPrivate exact path="/home" component={Home} />
        </Switch>
    )
}

App.js

import './App.css';

import React from 'react';
import { Router } from 'react-router-dom';

import Routes from './components/route/CustomRoute';

import history from './defaults/HistoryDefaults';

import { AuthProvider } from './contexts/AuthContext';

export default function App() {
    return (
        <AuthProvider>
            <Router history={history}>
                <Routes />
            </Router>
        </AuthProvider>
    );
}

更新 一个额外的信息是，这个问题只有在我点击退出系统时才会发生。我的意思是，第一次登录会按预期重定向我，但是一旦登录，当我单击注销并再次尝试登录时，历史记录不会重定向我。

有人知道这是怎么回事吗，请解释一下我的错误是什么？

谢谢大家

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）