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 = () => (
<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;
5, App.js页面:
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>
);}}
6,Login.js页面进行登录验证,验证函数也在这里,实现校验成功后跳转:
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>
) }
}
7,哦,别忘了:
npm install react-router-dom
npm intall history