初学 React Router 请教在 ES6 下 如何实现路由跳转前确认

Question

根据 React Router 的官方文档：React Router 提供一个 routerWillLeave 生命周期钩子，这使得 React 组件可以拦截正在发生的跳转，或在离开 route 前提示用户链接：跳转前确认 | React Router 中文文档所以我目前是想在一个嵌套得较深的子组件内使用这个 routerWillLeave 钩子，由于我使用了 ES6，组件的代码类似下面这样：class XXX extends XXX {  ... } export default XXX;所以没有办法使用文档中的 mixin 方法，我想到了使用 react-mixin，参考 StackOverFlow 写了下面的代码：打断点发现 this.props.route 是 undefined，随后根据文档说明，对顶层组件、父级组件都尝试了进行配置mixin，但是配置后发现 route 会冲突，希望有解决过这类问题的各路高手能够帮忙。十分感谢

Answer 1

export default class XXX extends React.Component {

    constructor(props) {

        super(props);

        this.props.router.setRouteLeaveHook(

            this.props.route,

            this.routerLeaveInformation

          )

    }

    routerLeaveInformation() {

        return 'You have unsaved information, are you sure you want to leave this page?';

    }

}

这是v3版本的，其他版本没试