React 阻止路由离开

Posted 2020-12-13 amiezhang

React不像Vue那样有router.beforeEach这样的路由钩子，但是它提供了一个组件：Prompt

import { Prompt } from ‘react-router-dom‘;
<Prompt
    when={true}
    message={location => ‘信息还没保存，确定离开吗？‘}
/>

在React跳转路由的时候，Prompt就会触发

 

但是这个路由没法阻止刷新和关闭，这个时候我们用beforeunload事件

class Test extends React.Component {
    componentDidMount() {
        this.init();
        window.addEventListener(‘beforeunload‘, this.beforeunload);
    }

    componentWillUnmount = () => {
        window.removeEventListener(‘beforeunload‘, this.beforeunload);
    };

    beforeunload = (ev: any) => {
        if (ev) {
        　　ev.returnValue = ‘‘;
        }
    };

    render() {
        return <div>...</div>
    }
}