Я вижу страницу входа в течение доли секунды, а затем перенаправляется на ведущую форму.

Question

Я пытаюсь объединить реакцию с django, для этого я имею в виду один из курсов Брэда, где он использовал django с реакцией [https://www.youtube.com/watch?v=kfpY5BsIoFg&list=PLillGF-RfqbbRA-CIUxlxkUpbq0IFkX60&index=7] . Я использую HashRouter как предложено в курсе и реагирую маршрутизатор для обработки маршрутизации. Проблема заключается в том, что всякий раз, когда я иду на http://localhost: 8000 , он идет прямо к "http://localhost: 8000 / # / " вместо того, чтобы идти к " http://localhost: 8000 / # / login". Вот как выглядит мой код для auth и Login JS вместе с моими личными маршрутами.

аутентификация JS

import axios from 'axios';

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


// CHECK TOKEN & LOAD USER
export const loadUser = () => ( dispatch, getState ) =>
{
  // User Loading
  dispatch( { type: USER_LOADING } );

  const token = getState().auth.token

  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };

  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( {
        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( {
        type: LOGIN_FAIL
      } );
    } );
};

ВХОД JS

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

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

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

  onSubmit = e =>
  {
    e.preventDefault();
    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"
                className="form-control"
                name="username"
                onChange={ this.onChange }
                value={ username }
              />
            </div>

            <div className="form-group">
              <label>Password</label>
              <input
                type="password"
                className="form-control"
                name="password"
                onChange={ this.onChange }
                value={ password }
              />
            </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 connect(
  mapStateToProps,
  { login }
)( Login );

ЧАСТНЫЕ МАРШРУТЫ

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";

const PrivateRoute = ( { component: Component, auth, ...rest } ) => (
    <Route
        { ...rest }
        render={ props =>
        {
            if ( auth.isLoading )
            {
                return <h2>Loading...</h2>;
            } else if ( !auth.isAuthenticated )
            {
                return <Redirect to="/login" />;
            } else
            {
                return <Component { ...props } />;
            }
        } }
    />
);

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

export default connect( mapStateToProps )( PrivateRoute );

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 { 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 Login from "./accounts/Login";
import Register from "./accounts/Register";
import PrivateRoute from "./common/PrivateRoute";


import { Provider } from "react-redux";
import store from "../store";
import { loadUser } from "../actions/auth";




// Alert Options
const alertOptions = {
  timeout: 3000,
  position: "top center"
};

class App extends Component
{

  componentDidMount ()
  {
    store.dispatch( loadUser() );
  }

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

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