1、先寫一個使用者登入介面
login.js：

import React from 'react';

export default  class Login extends React.Component{
    render(){
        return <div>
            <h2>使用者登入</h2>
            <p><span>使用者名稱：</span><input/></p>
            <p><span>密  碼：</span><input/></p>
            <p><input type="submit"
 
 value="登入"/></p>
        </div>
    }
}

要想展示出來，就得配置路由。
router-demo.js中：

import Login from "./login"

<li><Link to="/login">使用者登入</Link></li>

 <Route  path="/login" component={Login}/>

2、介面已經ok，接下來就是要 獲取文字框的使用者名稱和密碼

login.js程式碼：

import React from 'react'
 
;

export default  class Login extends React.Component{
    // 構造
      constructor(props) {
        super(props);
        // 初始狀態
        this.state = {
            user_name:"",
            user_pwd:""
        };
      }

    render(){
        return <div>
            <h2>使用者登入</h2>
            <p>
                <span>使用者名稱：</span>
                <input type
 
="text" onChange={(e)=>{
                    this.setUserInfo(e,"user_name")
                }}/>
            </p>
            <p>
                <span>密  碼：</span>
                <input type="password" onChange={(e)=>{
                    this.setUserInfo(e,"user_pwd")
                }}/>
            </p>
            <p><input type="submit" onClick={()=>{
                alert(this.state.user_name+":"+this.state.user_pwd);
            }} value="登入"/></p>
        </div>
    }

    setUserInfo(event, key){
        let obj = {};
        obj[key] = event.target.value;

        this.setState(obj);
    }
}

程式碼解析：2個文字框都的onChange事件裡都呼叫同一個方法傳遞一個key值和event事件本身。
用key區分是為了用setUserInfo()這同一個函式。
在這個函式裡實現了對傳遞進來的文字框的值的儲存。

3、路由跳轉

比如我們點選登入（暫時不做登入判斷）之後，需要跳轉到 help幫助頁面。

<input type="submit" onClick={()=>{
                this.props.history.push("/help");
            }} value="登入"/>