刚接触react,路由使用的react-router 4.0。对于路由在页面中的跳转,使用了两种方法
1,使用widthRouter,他是一个高阶组件,他提供了history让我们使用。
eg:返回上一个页面,下面是我的实现代码。
import React,{Component} from 'react' import {withRouter} from 'react-router-dom' import '../../common/css/iconfont.css' import '../../common/css/head.css' class HeadBack extends Component{ constructor(){ super() } goback(){ this.props.history.goBack() } render(){ return( <div className="head-wrapper"> <div className="head-box"> <div className="head-left"> <i className="iconfont icon-common-fanhui-copy" onClick={()=>this.goback()}></i> </div> <div className="head-right"> <div className="head">{this.props.title}</div> </div> </div> </div> ) } } export default withRouter(HeadBack);
2,使用createBrowserHistory
eg:部分代码片段
import React,{Component} from 'react'
import {createBrowserHistory} from 'history'
const history = createBrowserHistory()
class myComponent extends Component{
constructor(){
super();
}
componentDidMount(){
fetch('url',{
method:'get/post'
}).then(res => res.json())
.then(res => {
this.props.history.push("/")
})
}
render(){
return(
<div className="container">
</div>
)
}
}
export default myComponent
以上代码仅供参考