react-router-dom Prompt 组件

这是Prompt 组件是在离开当前页面是触发

import { Link, Prompt } from 'react-router-dom'

// 在页面中添加标签 
<Prompt
    when={isShelf}  // 一个状态when= true 是才触发下面方法
    message={this.unAddShelf.bind(this)}
/>

页面跳转拦截

unAddShelf(location) {
    // location 携带的路径
    const pathUrl = location.pathname + location.search
     // 自定义的mode 框窗口
    Modal.alert('温馨提示', '喜欢就加入书架把', [
        { text: '取消',
            onPress: () =>
                new Promise((resolve) => {
                    setTimeout(resolve, 100)
                    // react setState 是异步修改所以要在完成后调用下面跳转（不然会被不停的拦截）
                    this.setState({
                        isShelf: false
                    },() => {
                        this.props.history.push(pathUrl)
                    })
                })
        },
        {
            text: '确定',
            onPress: () =>
                new Promise((resolve) => {
                    setTimeout(resolve, 100)
                    this.addShelf()
                    this.setState({
                        isShelf: false
                    },() => {
                        this.props.history.push(pathUrl)
                    })
                })
        },
    ])
    // 拦截重点
    return false
}