在每一次切换路由时，都弹出提示询问是否确定，如何在全局触发？？

Question

问题：

这是阮一峰讲react-router中的一段代码：
地址：http://www.ruanyifeng.com/blo... 滑到最下面

请问我怎么经这段代码放到全局？放到哪个文件中呢？

我的index.js:

import $ from "jquery"
import React from "react"
import ReactDOM from "react-dom"
import AppRouter from "./router"
import { Provider } from "react-redux"
import LocaleProvider from "antd/lib/locale-provider"
import configureStore from "./store"
import "./assets/style/index.less"
import zhCN from 'antd/lib/locale-provider/zh_CN';

const store = configureStore();


class Root extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <LocaleProvider locale={zhCN}>
        <Provider store={store}>
          <div>
            <AppRouter store={store} />
          </div>
        </Provider>
      </LocaleProvider>
    )
  }
}
ReactDOM.render(<Root />, document.getElementById("p_app"))

能放这里吗？

Answer 1

使用高阶组件：

import Immutable from "immutable"
import React from "react"
import { withRouter } from "react-router"

const routerLeaveHookHoc = WrappedComponent => {
    //withRouter本身是一个高阶组件，每个页面都要用到，所以提升到这里来，每个页面使用routerLeaveHookHoc 就可以
    return withRouter(
        class extends React.Component {
            componentDidMount() {
                console.log("我是高阶组件的didmount");
                this.props.router.setRouteLeaveHook(
                    this.props.route,
                    this.routeLeaveHook
                );
            }

            routeLeaveHook(a){
              // 返回 false 会继续停留当前页面，
              // 否则，返回一个字符串，会显示给用户，让其自己决定
            }
            render() {
                return <WrappedComponent {...this.props}/>
            }
        }
    )
}

Answer 2

当然能放在这里了。