码迷,mamicode.com
首页 > 其他好文 > 详细

React 阻止路由离开

时间:2020-06-29 13:25:25      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:ini   imp   信息   idm   turn   import   col   react   out   

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>
    }
}

  

React 阻止路由离开

标签:ini   imp   信息   idm   turn   import   col   react   out   

原文地址:https://www.cnblogs.com/amiezhang/p/13207409.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!