React Router4.2

通过使用React Router 实现一个简单的登录Demo，提升对React路由的熟练度。
login.jsx

import React, { Component } from "react";

class inputs extends Component {
	//设置state数据，通过onChange绑定到对应的input标签中
    constructor() {
        super()
        this.state = {
            'username': '',
            'password': ''
        }
    }
    //通过这两个函数实现input值的双向绑定
    usernameChange(event){
        this.setState({username: event.target.value})
    }
    passwordChange(event){
        this.setState({password: event.target.value})
    }
    render() {
        return (
            <div>
                登录
                <br/>
                <input onChange={this.usernameChange.bind(this)} value={this.state.username} type="text"/><br/>
                <input onChange={this.passwordChange.bind(this)} value={this.state.password} type="password"/><br/>
                <input onClick={this.submits.bind(this)} type="submit"/>
                <span onClick={this.submits.bind(this)}>正文</span>
            </div>
        )
    }
    //提交按钮的点击事件，判断账户密码并且进行相应的跳转传值
    submits(){
        if(this.state.username !== '' && this.state.password !== '')
        this.props.history.push({pathname: '/main', state: this.state.username})
    }
}
export default inputs;

mian.jsx

import React, {Component} from 'react'

class main extends Component {
    constructor() {
        super()
        this.state = {
            'username': ''
        }
    }
    //在dom建立完成之后的生命周期，判断是否有数据，如果没有跳转登录页面
    componentDidMount() {
        if(this.props.location.state !== '') 
            this.setState({username: this.props.location.state})
        if(this.state.username !== '' || this.props.location.state !== '') 
        return
        else
            this.props.history.push('/login')
    }
    render() {
    	//进行对应的css样式绑定
        const top = {
            height: '50px',
            width: '100%',
            border: '1px solid black',
            lineHeight: '50px',
            textAlign: 'center'
        }
        const middle = {
            height: '400px',
            width: '100%',
            textAlign: 'center'
        }
        return (
            <div>
                <div style={top}>
                    用户名: {this.state.username}
                </div>
                <div style={middle}>
                    <span onClick={this.submit.bind(this)}>跳转inputs页面</span>
                </div>
            </div>
        )
    }
    //进行路由跳转
    submit(){
        console.log('点击')
        this.props.history.push('/inputs');
    }
}

export default main;

App.jsx

import React from 'react';
import { Component } from 'react';
import { Route, Switch, BrowserRouter } from "react-router-dom";

import './App.css';
//在这里引入用到的路由
import inputs from './components/input/input'
import main from './components/main/main'
import login from './components/login/login'

class App extends Component {
  render(){
  return (
    <div className="App">
    	React
      <div>
      //在这里对路由进行相应的布局处理
        <BrowserRouter>
            <Switch>
              <Route path="/main" exact component={main}/>
              <Route path="/inputs" component={inputs}/>
              <Route path="/login" component={login}/>
            </Switch>
        </BrowserRouter>
      </div>
    </div>
  );
  }
}

export default App;

总结：
通过 onChange 事件和 this.state属性进行数据的双向绑定，路由跳转通过 this.props.history.push({path: '/login', state: value}) 实现路由跳转以及信息的传递。通过this.props.location.state获取路由跳转携带的信息。通过jsx语法引入css样式