利用Prompt,阻止react路由切换,弹窗确认,并且自定义弹窗样式

在做项目的时候,有个需求,当表单页面未保存,切到其他页面时需要用户确认跳转。

按常理来说,跳转是由react-router-dom控制的,所以它也应该有阻止跳转的机制,查了api,发现Prompt这个组件可以做到这个事。将Prompt放在需要弹窗的页面里,哪里都行,就可以有这个功能。

      <Prompt message={() => isSave ? true : '有修改尚未保存,确定要离开页面吗?’} />

Prompt接受两个属性,message可以是字符串或方法,方法返回true就顺利跳转,返回字符串就弹窗阻止跳转。还有个属性when,是boolean值,true就是弹窗,false为顺利跳转。

但现在的弹窗是浏览器的默认弹窗,很丑。所以我们需要自定义一下。

react-router-domBrowserRouterHashRouter上有属性getUserConfirmation可以阻止默认弹窗。

    <BrowserRouter getUserConfirmation={getConfirmation} >
        <App />
    </BrowserRouter>

这个属性是一个方法,参数为Promptmessage和弹窗取消和确认的回调。这里我直接用的antd的modal组件作为弹窗。

  const getConfirmation = (message: any, callback: any) => {
    Modal.confirm({
      title: message,
      onCancel: () => {
        callback(false);
      },
      onOk: () => {
        callback(true);
      }
    });
  };

最后,在过程中踩了一个坑。就是不能用router组件。如果你像这样

    <BrowserRouter getUserConfirmation={getConfirmation} >
      <Router history={history}>
        <App />
      </Router>
    </BrowserRouter>

那么getUserConfirmation是不会起作用的。

    原文作者:ppsspp
    原文地址: https://segmentfault.com/a/1190000020241389
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞