react.js实现页面登录跳转

1，页面目录信息：

2，从index.js导入路由信息BasicRoute.js，然后BasicRoute.js中存储App.js和StatisticsInformation.js页面信息，从App.js登录成功后跳转到StatisticsInformation.js页面。

3，index.js略
4，BasicRoute.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 = () => (
            //给路由添加属性history，这样父组件就可以调用this.props.history.push
        
               //注册组件
               //注册组件
        
      
);
export default BasicRoute;
5， App.js页面：
export  default  class  App  extends   React.Component{
 render(){
        return (
            

                //将this.props.history作为属性传递给子组件Login。因为子组件不具备history属性。
            
        );}}

6，Login.js页面进行登录验证，验证函数也在这里，实现校验成功后跳转：
class Login   extends   React.Component{
     submitFun(username,password){            //登录验证函数          
  var  newpage = this.props.newpage;          //跳转的目标页面
 this.props.history.push(newpage);          //实现跳转
         } ;  

 render(){       
      return(
         
this.submitFun(username,password)} >   //登录的时候触发函数
        
       ) }
}
7,哦，别忘了：
npm  install  react-router-dom
npm  intall   history