react-router 离开路由前确认
2017-08-06 17:54
477 查看
react路由在做离开前确认时,有两种方法
第一种是我们写的是动态路由,可以做一个简单的离开前确认
这个函数是很好,但是有一个问题,无法获取到组件里的值,无法通过组建里的状态来触发,我个人认为不是很好
那么另外一个方法是什么呢
这个方法必须要在react-router 2.4.x 以上的版本才有 withRouter 方法,这样就可以做路由确认前的跳转,还可以获取到组件里的方法,通过组件状态来判断是否要触发
第一种是我们写的是动态路由,可以做一个简单的离开前确认
path: '/association/administration', component: Administration, childRoutes: [ { path: '/association/administration/basicInfo/:id', getComponent(location, cb) { require.ensure([], require => { const ARList = require('./components/basicInfo/action-reducer.js'); const compKey = 'adminActivity'; injectReducer(compKey, ARList.reducerList); const activityContainer = require('./components/basicInfo/container.js').default; cb(null, activityContainer); }); } onLeave() { // 在路由离开时触发此方法 }, onEnter(nextState, replace) { // 在进入路由前触发此方法 } }
这个函数是很好,但是有一个问题,无法获取到组件里的值,无法通过组建里的状态来触发,我个人认为不是很好
那么另外一个方法是什么呢
import React, {Component} from 'react'; import {withRouter} from 'react-router'; export default withRouter(class extends Component { state = { unsaved: true } componentDidMount() { this.props.router.setRouteLeaveHook(this.props.route, () => { if (this.state.unsaved) { if(confirm('确定要离开吗')) { return true } else { return false } } }) } render() { return ( <div> <h2>About</h2> 路由跳转前确认 </div> ) } })
这个方法必须要在react-router 2.4.x 以上的版本才有 withRouter 方法,这样就可以做路由确认前的跳转,还可以获取到组件里的方法,通过组件状态来判断是否要触发
相关文章推荐
- React-router 4路由嵌套
- react-router JS 控制路由跳转实例
- react路由基础(Router、Link和Route)
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- react-router 4.x(路由)
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- React系列八——进入离开路由地址、查询符及生命周期
- React-router(8)Link 标签 to 属性为对象时(路由信息传值)
- (二)创建react-router路由
- react-router 获取路由参数
- react-router 路由控制页面跳转
- React-router路由实践
- 深入理解 react-router 路由系统
- react入门之路由----react-router的跳转问题
- React-router路由实践
- React-Router 4 路由嵌套实现的分步表单
- ReactJs Router 路由地址跳转方式带参数
- react-router+webpack+gulp路由实例
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- react-router-dom 手动控制路由跳转