react-router 离开路由前确认

react路由在做离开前确认时,有两种方法

第一种是我们写的是动态路由,可以做一个简单的离开前确认

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 方法,这样就可以做路由确认前的跳转,还可以获取到组件里的方法,通过组件状态来判断是否要触发