react-router 4中离开确认自定义

在有些应用中，产品需求是这样的：例如-用户详情编辑页 当用户跳转路由时，须要提示用户当前页面的数据还没有保存，提示用户离开确认。

大概效果如图:

以前router-router的作法是：

路由钩子：
 componentDidMount() {
 this.props.router.setRouteLeaveHook(
        this.props.routes[1],
        this.routerWillLeave()
 )}

 routerWillLeave() { return false}   ture为离开，false为留下
复制代码

而在react-router 4中 是：

使用Prompt 组件：

import { Prompt } from 'react-router-dom';
....
render(){
  return(
      <Prompt message="肯定要离开？"  when={true}/>
  )
}
复制代码

其中message能够为：

1. message: string 当用户离开当前页面时，设置的提示信息。

2. message: func 当用户离开当前页面时，设置的回掉函数 <Prompt message={location => ( Are you sue you want to go to ${location.pathname}? )} />

3. when: bool 经过设置必定条件要决定是否启用 Prompt，属性值为true时启用防止转换；

可是，直接这样用的话，页面默认弹出的是这样的效果：

不符合咱们的产品设计需求。

1. 自定义

直接上demo

import React from 'react'
import ReactDOM from 'react-dom'
import { Prompt } from 'react-router'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'
const MyComponent1 = () => (
    <div>组件一</div>
)
const MyComponent2 = () => (
    <div>组件二</div>
)
class MyComponent extends React.Component {
    render() {
        const getConfirmation = (message,callback) => {
            const ConFirmComponent = () => (
                <div>
                    {message}
                    <button onClick={() => {callback(true);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>肯定</button>
                    <button onClick={() => {callback(false);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>取消</button>
                </div>
            )
            ReactDOM.render(
                <ConFirmComponent />,
                document.getElementById('root1')
            )
        }
        return (
            <Router getUserConfirmation={getConfirmation}>
                <div>
                    <Prompt message="Are you sure you want to leave?" />
                    <Link to="/a">跳转组件二</Link>
                    <Route component={MyComponent1}/>
                    <Route exact path="/a" component={MyComponent2}/>
                </div>
            </Router>
        )
    }
}
ReactDOM.render(
    <MyComponent/>,
    document.getElementById('root')
)
复制代码

更多 react-router的api介绍能够看文章

react-router4相关属性api介绍