react-router 路由控制页面跳转
2017-12-20 18:04
851 查看
刚接触react,路由使用的react-router 4.0。对于路由在页面中的跳转,使用了两种方法
1,使用widthRouter,他是一个高阶组件,他提供了history让我们使用。
eg:返回上一个页面,下面是我的实现代码。
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
以上代码仅供参考
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
以上代码仅供参考
相关文章推荐
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- react-router JS 控制路由跳转(转载)
- React学习(三)——Router路由的使用和页面跳转
- react-router v4 使用 history 控制路由跳转
- react-router-dom 手动控制路由跳转
- react-router JS 控制路由跳转实例
- react-router v4如何使用history控制路由跳转详解
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
- React Native Navigator 的路由以及页面跳转
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- react-router 4.2.0<link>页面跳转-传参与不传参
- 《ReactNative实战讲义》React-native-router-flux框架篇---页面跳转与传值
- 关于react-router4中路由的配置,传参,跳转,可选参数写法
- react入门之路由----react-router的跳转问题
- React从react-router路由上做登陆验证控制的方法
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- React-Router做路由,打包出来的静态文件丢到Tomcat里路由不生效,刷新页面404两个错误
- AngularJS路由之ui-router(四)$state.go页面跳转
- Vue-router路由判断页面未登录跳转到登录页面的实例