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介紹