Реагируйте. js Страница входа должна открывать компонент

Question

Итак, я создал эту страницу входа (описание ниже):

Приложение. js Компонент:

import React, { Component } from 'react';
import axios from 'axios'
import Main from './Components/Main/main';
import Login from "./Components/Login/login";
class App extends Component {
state={
  isLoggedIn:null,
  isLoading:false,
}
  isLoggedIn= async ()=>
  {
      await axios.get(`http://localhost:5000/isloggedin`, {withCredentials: true})
      .then(response=>{
          if(response.data!==false)
          {
            console.log('check')
            this.setState({isLoggedIn:response.data.isLoggedIn})
            console.log('check state', this.state.isLoggedIn)

          }
      })
      .catch(error=>{
          console.log('isLoggedIn error: ',error)
      })
  }

  login= async (mail, password)=> 
  {
      let loginCredentials={
          email:mail,
          password:password,
      }
      await axios.post(`http://localhost:5000/login`, { loginCredentials })
          .then(response => {
              this.setState({isLoggedIn:response.data.isLoggedIn})

          })
          .catch(error => {
              console.log("error: ", error);
          })
  }
    checkLogin=async()=>
    {
      if(this.state.isLoggedIn===null)
      {
        await this.isLoggedIn();
      }
    }

    routeFun=()=>
    {
    let route=[];
    if(this.state.isLoggedIn!==true)
    {
      route.push(<Login
        isLoggedIn={this.state.isLoggedIn} isLoggedInFun={this.isLoggedIn} login={this.login}
      ></Login>)
    }
    else
    {
      route.push(<Main 
        signOut={this.signOut}
        isLoggedIn={this.state.isLoggedIn} isLoggedInFun={this.isLoggedIn}
        isLoading={this.state.isLoading}
        changeLoading={this.changeLoading}
      ></Main>)
    }

    return route
  }

  changeLoading=()=>
  {
    this.setState({isLoading:!this.state.isLoading})
  }
  signOut= async ()=>
  {
      {
          let confirmationString="Are you sure that you want to sign-out?"
          let res=window.confirm(confirmationString)
          if(res===true)
          {
          sessionStorage.clear();
          await axios.get(`http://localhost:5000/signout`, {withCredentials: true})
          .then(response=>{
      })
      .catch(error=>{
          console.log('isLoggedIn error: ',error)
      })
      }
      }
  }

  render (){
    {this.checkLogin()}
  return (
    <div className="App" >

          {this.routeFun()}

    </div>
  );
}
}
export default App;

Компонент входа:

import React, { Component } from 'react';
import axios from 'axios';
import './login.css';
class Login extends Component {
    logged=false;
    state = {
        isLoggedIn: null,
        modal:false,
    }

    ButtonLoginForm =  () => //The login button Function
    {
        let mail = document.querySelector("#mail").value;
        let password = document.querySelector("#Password").value;
        this.props.login(mail, password)
        // console.log('is Logged?',this.state.isLoggedIn)
    }




    render() {
        console.log('loggedin? ',this.props.isLoggedIn)
        if(this.props.isLoggedIn===true)
        {
            window.location.reload()
        }

        return (
            <div className="login">
                <div className="FormCheck">
                    <div className="form">
                        <div className="LoginForm">

                            <div className="FormItself container">
                                <p className="EmailP">Email:</p>
                                <input type="email" className="email" placeholder="mail" id="mail" />
                                <br />
                                <br />
                                <p className="PasswordP">Password:</p>
                                <input type="Password" className="Password" placeholder="Password" id="Password" />
                                <br />
                                <br />
                                    <div className="bt">
                                        <button type="button" className="btn loginButton" onClick={this.ButtonLoginForm}>Login!</button>

                                    </div>
                                    <br />
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        );

    }
}

export default Login;

Проблема в том, что при вводе правильного адреса электронной почты и пароля компонент «Главный» не открывается. Если я перефразирую sh страницу вручную - компонент открывается без проблем. В начале я попробовал это с перенаправлением - но это не go хорошо, тот же самый сценарий произошел. Я нажимаю на кнопку и ничего не происходит. Кто-нибудь может помочь мне найти решение?

Кстати: значения response.data.isLoggedIn могут быть "true", "false" и "null".

Спасибо за помощь!