react离开页面，自定义弹框拦截，路由拦截

X1nFLY 发布于2019-08-23 17:20 / 2551人阅读

摘要：前言项目有个需求是跳转路由，在离开页面前，需要弹框询问用户是否确定离开。

前言：
项目有个需求是：跳转路由，在离开页面前，需要弹框询问用户是否确定离开。
用react-router的组件是可以的，但是，怎么使用antd组件（或者说自定义组件）呢？
请看下面

先看的这个：https://stackoverflow.com/questions/32841757/detecting-user-leaving-page-with-react-router
（1）使用react-router的

import { Prompt } from "react-router"

（2）支持函数

 {
    return window.confirm(`confirm to leave to ${location.pathname}?`);
  }}
/>

（3）history.block，这个是个坑！

import { history } from "path/to/history";
class MyComponent extends React.Component {
   componentDidMount() {
      history.block(targetLocation => {
           // take your action here     
           return false;
      });
   }
   render() {
      //component render here
   }
}

坑的原因是history.block()方法是不能和组件并列使用的，而必须在history.block()内部去调用组件（就是注释take your action here那里），这就导致一个问题：组件里的 onOk、onCancel 如何返回值给 history.block()的 return 语句（return false/true）的同时，不让history.block()的 return 语句和组件顺序执行呢？

说白点就是，组件先显示出来，阻塞后面的 return false/true，等组件的 onOk、onCancel 方法执行后，再 return false/true

我试了几种方法，不行，直到找到这篇文章：
Using React-Router v4 Prompt with custom modal component

（4）在离开页面，路由跳转时，自定义弹框拦截，并询问

  handlePrompt = location => {
    if (!this.isSave) {
      this.showModalSave(location);
      return false;
    }
    return true;
  };

  showModalSave = location => {
    this.setState({
      modalVisible: true,
      location,
    });
  };

  closeModalSave = () => {
    const { location } = this.state;
    const { history } = this.props;
    this.setState({
      modalVisible: false,
    });
    history.push({
      pathname: `..${location.pathname}`,
    });
  };

  handlePrompt = location => {
    if (!this.isSave) {
      this.showModalSave(location);
      return false;
    }
    return true;a
  };

  handleSave = () => {
    const { location } = this.state;
    const { history } = this.props;
    this.isSave = true;
    console.log(location.pathname, "pathname75");
    history.push({
      pathname: `..${location.pathname}`,
    });
    this.setState({
      modalVisible: false,
    });
    this.saveAll();
  };

 

是否保存修改？

完美实现离开页面，路由拦截的同时，显示自定义模态框！

（完）

云服务器 GPU云服务器自定义弹框 php页面拦截器服务器拦截页面图片自定义弹框js插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104195.html

19/3/29学习笔记

摘要：如果用户已经登录，则顺利进入路由，否则就进入登录页面。如果全部钩子执行完了，则导航的状态就是确认的。通过这个字段来判断该路由是否需要登录权限。还有一种情况便是当前失效了，但是依然保存在本地。通过配置，当后端接口返回未授权，让用户重新登录。 vue+axios 前端实现登录拦截（路由拦截、http拦截）一、路由拦截登录拦截逻辑第一步：路由拦截首先在定义路由的时候就需要多添加一个自定义字...

galois 2019-08-26 13:38 评论0 收藏0
react-router v4.x 源码拾遗1

摘要：还是先来一段官方的基础使用案例，熟悉一下整体的代码流程中使用了端常用到的等一些常用组件，作为的顶层组件来获取的和设置回调函数来更新。 react-router是react官方推荐并参与维护的一个路由库，支持浏览器端、app端、服务端等常见场景下的路由切换功能，react-router本身不具备切换和跳转路由的功能，这些功能全部由react-router依赖的history库完成，his...

itvincent 2019-08-26 13:51 评论0 收藏0
react-router v4.x 源码拾遗1

摘要：还是先来一段官方的基础使用案例，熟悉一下整体的代码流程中使用了端常用到的等一些常用组件，作为的顶层组件来获取的和设置回调函数来更新。 react-router是react官方推荐并参与维护的一个路由库，支持浏览器端、app端、服务端等常见场景下的路由切换功能，react-router本身不具备切换和跳转路由的功能，这些功能全部由react-router依赖的history库完成，his...

Joyven 2019-08-02 15:06 评论0 收藏0
浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层

摘要：其实就是我们开始挂载上去的我们在这里出去，我们就可以在回调里面只处理我们的业务逻辑，而其他如断网超时服务器出错等均通过拦截器进行统一处理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 开始之前随着业务的不断累积，目前我们 ToC 端主要项目，除去 node_modules， bu...

rickchen 2019-08-22 18:29 评论0 收藏0