react.js实现页面登录跳转示例

import React from 'react';
import {HashRouter, Route, Switch,hashHistory} from 'react-router-dom';       //导入react-router-dom组件
import App from '../App';                                                     //导入页面
import StatisticsInformation from '../firstpage/StatisticsInformation';       //导入页面
import createBrowserHistory from "history/createBrowserHistory";              //导入history包
const customHistory = createBrowserHistory();                                 //创建
const BasicRoute = () => (
        <HashRouter history={customHistory}>    //给路由添加属性history，这样父组件就可以调用this.props.history.push
        <Switch>
            <Route exact path="/" component={App}/>   //注册组件
            <Route exact path="/firstpage/StatisticsInformation" component={StatisticsInformation}/>   //注册组件
        </Switch>
      </HashRouter>
);
export default BasicRoute;

export  default  class  App  extends   React.Component{
 render(){
        return (
            <div className="back">
              <Login  history={this.props.history} url='http://www.baidu.com' />  //将this.props.history作为属性传递给子组件Login。因为子组件不具备history属性。
            </div>
        );}}

class Login   extends   React.Component{
     submitFun(username,password){            //登录验证函数          
  var  newpage = this.props.newpage;          //跳转的目标页面
 this.props.history.push(newpage);          //实现跳转
         } ;  

 render(){       
      return(
         <Form  onSubmit={(username,password)=>this.submitFun(username,password)} >   //登录的时候触发函数
        </Form>
       ) }
}

npm  install  react-router-dom
npm  intall   history