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