反应js条件渲染失败

Question

我尝试根据用户是否已登录来渲染 以下是我的20 10 10 40 10 10 10 10 20 10 10 10 10 20 20 20 以及LoginForm.js和Index.js。我试图从Dashbaord.js转到LoginForm.js，但它无法正常工作。没有错误，但Dashboard.js文件的内容会在恢复到Dashboard.js之前显示一小段时间。我在这里做错了什么？

LoginForm.js

LoginForm.js

Dashboard.js

// jshint esversion: 6
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dashboard from './Dashboard.js';

class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.props = props;
        this.state = {
            pic: '//ssl.gstatic.com/accounts/ui/avatar_2x.png',
            isLoggedIn: false
        };

    }

    _login(){
        let username = document.getElementById('inputEmail').value;
        let password = document.getElementById('inputPassword').value;
        this.options = {
            username: username,
            password: password
        };
        this.props.client.login(this.options, (success, data)=>{
            if (success) {
                console.log('You are now logged in', data);
                this.setState({isLoggedIn: true});
            }else{
                console.log('Details incorrect or something went wrong.');
            }
        });
    }
    handleSubmit(){
        this._login();
    }

    render() {
        let login = this.state.isLoggedIn;
        return (
            <div className='container'>
                {login ? (
                    <Dashboard/>
                ) : (
                    <div className='card card-container'>
                        <img alt='profile-img' id='profile-img' className='profile-img-card' src={this.state.pic} />
                        <p id='profile-name' className='profile-name-card'></p>
                        <form className='form-signin' onSubmit={this.handleSubmit.bind(this)}>
                            <span id='reauth-email' className='reauth-email'></span>
                            <input type='text' id='inputEmail' className='form-control' placeholder='Username'></input>
                            <input type='password' id='inputPassword' className='form-control' placeholder='Password'></input>
                            <button className='btn btn-lg btn-success btn-block btn-signin' type='submit'>Login</button>
                        </form>
                    </div>
                )}
            </div>
        );
    }
}

export default LoginForm;

这里的 Index.js ，其中包含// jshint esversion: 6 import React, { Component } from 'react'; class Dashboard extends Component { render() { return ( <article> <section className='text-section'> <h1>Dashboard</h1> <p> Welcome, you are logged in! To have a look at the code behind this application, go to Github. </p> </section> </article> ) } } export default Dashboard; 。

Router