资讯专栏INFORMATION COLUMN

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

X1nFLY / 2532人阅读

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

前言:
项目有个需求是:跳转路由,在离开页面前,需要弹框询问用户是否确定离开。
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();
  };

 

是否保存修改?

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

(完)

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

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

相关文章

  • 19/3/29学习笔记

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

    galois 评论0 收藏0
  • react-router v4.x 源码拾遗1

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

    itvincent 评论0 收藏0
  • react-router v4.x 源码拾遗1

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

    Joyven 评论0 收藏0
  • 浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层

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

    rickchen 评论0 收藏0

发表评论

0条评论

X1nFLY

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<