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

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

大概效果如图:

image.png

之前router-router的做法是：

路由钩子：
componentWillMount(){
    this.context.router.setRouteLeaveHook(
      this.props.route,
      this.routerWillLeave
    )
  }
  routerWillLeave( nextLocation ){
    return `页面即将从Home切换到${nextLocation.pathname}`
  }

而在react-router 4中 是：

使用Prompt 组件：

import { Prompt } from 'react-router-dom';
....
render(){
  return(
      
  )
}

其中message可以为：

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

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

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

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

image.png

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

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 = () => (
    
组件一
)
const MyComponent2 = () => (
    
组件二
)
class MyComponent extends React.Component {
    render() {
        const getConfirmation = (message,callback) => {
            const ConFirmComponent = () => (
                

                    {message}
                     {callback(true);ReactDOM.unmountComponentAtNode(document.getElementById('root'))}}>确定
                     {callback(false);ReactDOM.unmountComponentAtNode(document.getElementById('root'))}}>取消
                
            )
            ReactDOM.render(
                ,
                document.getElementById('root1')
            )
        }
        return (
            
                

                    
                    跳转组件二
                    
                    
                
            
        )
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
)

更多 react-router的api介绍可以看文章

react-router4相关属性api介绍