鍍金池/ 問答/HTML5  HTML/ 在每一次切換路由時，都彈出提示詢問是否確定，如何在全局觸發(fā)？？

在每一次切換路由時，都彈出提示詢問是否確定，如何在全局觸發(fā)？？

問題：

這是阮一峰講react-router中的一段代碼：
地址：http://www.ruanyifeng.com/blo... 滑到最下面
圖片描述

請問我怎么經(jīng)這段代碼放到全局？放到哪個文件中呢？

我的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"))

能放這里嗎？

回答
編輯回答
款爺

使用高階組件：

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 會繼續(xù)停留當(dāng)前頁面，
              // 否則，返回一個字符串，會顯示給用戶，讓其自己決定
            }
            render() {
                return <WrappedComponent {...this.props}/>
            }
        }
    )
}
2017年2月13日 20:14
編輯回答
瘋子范

當(dāng)然能放在這里了。

2017年4月10日 17:29