Question

我正在尝试使用URL获取页面，但是即使没有出现错误，组件也不会在浏览器中呈现。因此，很难解决该错误。请帮助我解决问题。

    import React, { Component } from 'react';
import { BrowserRouter as Router} from 'react-router-dom';
import Route from 'react-router-dom/Route';

class ToDoApp extends Component {
    render() {
        return (
            <Router>
                <div className="ToDoApp">
                    <Route path="/" exact strict Component={Index} />
                    <Route path="/welcome" exact strict Component={WelcomePage} />
                    <Route path="/login" exact strict Component={Login} />
                </div>
            </Router>
        );
    }
}

class Index extends Component {
    render() {
        return (<div><h1>Welcome</h1></div>);
    }
}

class WelcomePage extends Component {
    render() {
        return (
            <div>
                Welcome Page
            </div>
        );
    }
}

class Login extends Component {

    constructor(props) {
        super(props);

        this.state = {
            username: 'Ganesh',
            password: '',
            hasLoginFailed: false,
            showSucessMessage: false
        }

        this.handleChange = this.handleChange.bind(this);
        this.loginCheck = this.loginCheck.bind(this);
    }

    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value // for declaring variable we use []
        })
    }

    loginCheck() {
        if (this.state.username === "Ganesh" && this.state.password === 'admin') {
            console.log('successful');
            this.setState({ showSucessMessage: true, hasLoginFailed: false })
        } else {
            console.log('failed');
            this.setState({ hasLoginFailed: true, showSucessMessage: false })
        }
    }

    render() {
        return (
            <div>

                {/* True && 'String Value' -> String Value
                    False &&  'String Value' -> false */}
                {this.state.hasLoginFailed && <div>Invalid Login</div>}
                {this.state.showSucessMessage && <div>Valid Login</div>}

                UserName : <input type="text" name="username" value={this.state.username} onChange={this.handleChange} />
                Password : <input type="password" name="password" value={this.state.password} onChange={this.handleChange} />
                <button onClick={this.loginCheck}>Login</button>
            </div>
        )
    }

}

export default ToDoApp

如果我输入localhost：3000 / login->应该显示登录组件如果我把localhost：3000 / welcome-> WelcomePage Component应该显示

但是现在我得到了空白页

页面未在reactjs中呈现

0 个答案: