身份验证后，React登录页面未重定向到仪表板

Question

正在构建一个以django为后端，React为前端的应用程序。...这是仓库的链接link

这是我的app.js文件：

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

import { positions, Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';

import Header from './layout/Header';
import Dashboard from './leads/Dashboard';
import Alerts from './layout/Alerts';
import { Register } from './accounts/Register';
import { Login } from './accounts/Login';
import PrivateRoute from './common/PrivateRoute';

import { Provider } from 'react-redux';
import store from '../store';
import { loadUser, login } from '../actions/auth';


 // Alert OPtions 
const alertOprions = {
timeout: 3000,
position: 'top center'
};

class App extends Component {
componentDidMount(){
    store.dispatch(loadUser());
}

render() {
    return (
        <Provider store={store}>
            <AlertProvider template={AlertTemplate} 
             {...alertOprions} >
                 <Router>
                    <Fragment>
                        <Header />
                        <Alerts />
                        <div className="container">
                            <Switch> 
                                <PrivateRoute exact path="/" component={Dashboard} />
                                <Route exact path="/register" component={Register} />
                                <Route exact path="/login" render={(props) => <Login {...props} 
 login={login()} />} />
                            </Switch>
                        </div>
                    </Fragment>
                </Router>
            </AlertProvider>
        </Provider>
        )
 }
}

ReactDOM.render( <App/>, document.getElementById('app'));

这是我的Login.js组件

import React, { Component } from 'react';
import { Link, Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { login } from '../../actions/auth';
import store from '../../store';

export class Login extends Component {
state = {
    username: '',
    password: ''
};

static propTypes = {
    login: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool
};

onSubmit = e => {
    e.preventDefault();
    store.dispatch(login(this.state.username, this.state.password));
    // this.props.login(this.state.username, this.state.password);
};

onChange = e => this.setState({ [e.target.name]: e.target.value });

render() {
    if (this.props.isAuthenticated) {
        return <Redirect to="/" />;
    }
    const { username, password } = this.state;
    return (
        <div className="col-md-6 m-auto">
            <div className="card card-body mt-5">
                <h2 className="text-center">Login</h2>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                        <label>Username</label>
                        <input type="text"
                            name="username" value={username}
                            onChange={this.onChange}
                            className="form-control" />
                    </div>
                    <div className="form-group">
                        <label>Password</label>
                        <input type="password"
                            name="password" value={password}
                            onChange={this.onChange}
                            className="form-control" />
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-primary">
                            Login
                        </button>
                    </div>
                    <p>Don't have an account? <Link to="/register">Register</Link></p>
                </form>
            </div>

        </div>
    )
}
}

const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
})

export default withRouter(connect(mapStateToProps, {login})(Login));

这是我的auth.js文件，登录操作在这里。...

import axios from 'axios';
import { returnErrors } from './messages';

import { USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL } from './types';

// CHECK TOKEN AND USER 
export const loadUser = () => (dispatch, getState) => {
// User Loading 
dispatch({ type: USER_LOADING });
// Get Token from State 
const token = getState().auth.token;
// Headers 
const config = {
    headers: {
        'Content-Type': 'application/json'
    }
}
// if token, add to headers config 
if (token) {
    config.headers['Authorization'] = `Token ${token}`;
}

axios.get('api/auth/user', config)
.then(res => {
    dispatch({
        type: USER_LOADED,
        payload: res.data 
    });
}).catch(err => {
    dispatch(returnErrors(err.response.data,
        err.response.status));
    dispatch({
        type: AUTH_ERROR
    });
});
};

// LOGIN USER 
export const login = (username, password) => dispatch => {

// Headers 
const config = {
    headers: {
        'Content-Type': 'application/json'
    }
}

// Request body 
const body = JSON.stringify({username, password});

axios.post('api/auth/login', body, config)
.then(res => {
    dispatch({
        type: LOGIN_SUCCESS,
        payload: res.data 
    });
}).catch(err => {
    dispatch(returnErrors(err.response.data,
        err.response.status));
    dispatch({
        type: LOGIN_FAIL
    });
});
};

现在的问题是，每当我使用正确的凭据单击登录按钮时，页面都不会重定向到仪表板。...当我检查Redux开发工具时，它将显示令牌，isAuthenticated为true，用户数据...表明登录操作已正确触发，但页面未重定向...这意味着未加载loadUser操作...请帮帮我。...我认为可能是因为我在onSubmit（）方法中使用store.dispact（login（）），但是我不知道如何使login（）方法运行而不显示调度不是函数