使用高阶组件封装路由拦截逻辑

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量447 收藏 7
点赞数 3
文章标签： javascript 开发语言 react.js 前端 前端框架 面试 深度学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_86113453/article/details/142414438
版权

前言

用户在编辑表单时，经常编辑一半中途切换页面，我们需要进行路由拦截，对用户进行询问，是否需要保存当前信息。

文末有 已成功帮助500多人拿到前端offer的文章 ！！

React中实现路由拦截使用useBlocker就可以了。本文将使用高阶组件对路由拦截进行封装来扩展功能。

  1. 最基本的路由拦截，默认拦截弹窗
  2. 自定义控制是否需要拦截
  3. 自定义弹窗取消和确定事件
  4. 自定义弹窗样式

后面有代码仓库地址

正文

基本的路由拦截

编写一个WithBlocker来控制路由拦截，在需要拦截的页面使用就行

import { Modal } from 'antd';
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useBlocker } from 'react-router-dom';

const WithBlocker = (WrappedComponent: React.ComponentType<any>) => {
  return (props: any) => {
    /** 是否出现弹窗*/
    const [isOpen, setIsOpen] = useState(false);
    const blocker: any = useBlocker(
      ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname
    );

    useEffect(() => {
      if (blocker.state === 'blocked') {
        setIsOpen(true);
      } else {
        setIsOpen(false);
      }
    }, [blocker]);

    return (
      <>
        <WrappedComponent {...props} />

        <Modal
          title="默认弹窗"
          open={isOpen}
          onCancel={() => {
            setIsOpen(false);
            blocker.reset();
          }}
          onOk={() => {
            setIsOpen(false);
            blocker.proceed();
          }}
        >
          <div>是否退出</div>
        </Modal>
      </>
    );
  };
};

export default WithBlocker;

这就是最基本，只要离开页面就拦截。

import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import WithBlocker from '../../feature/RouteInterception/WithBlocker';

const Index = () => {
  return <div>home</div>;
};

export default WithBlocker(Index);
自定义控制是否需要拦截

我们只要控制useBlocker里面函数的返回值就可以控制是否拦截，true拦截，false不拦截。

const blocker: any = useBlocker( ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname );

使用isIntercept开控制，是否要进行路由拦截

import { Modal } from 'antd';
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useBlocker } from 'react-router-dom';

const WithBlocker = (WrappedComponent: React.ComponentType<any>) => {
  return (props: any) => {
    /** 是否出现弹窗*/
    const [isOpen, setIsOpen] = useState(false);
    /** 是否拦截路由*/
    const [isIntercept, setIsIntercept] = useState(true);
    const blocker: any = useBlocker(
      ({ currentLocation, nextLocation }) => isIntercept && currentLocation.pathname !== nextLocation.pathname
    );

    useEffect(() => {
      if (blocker.state === 'blocked') {
        setIsOpen(true);
      } else {
        setIsOpen(false);
      }
    }, [blocker]);

    return (
      <>
        <WrappedComponent {...props} setIsIntercept={setIsIntercept} />

        <Modal
          title="默认弹窗"
          open={isOpen}
          onCancel={() => {
            setIsOpen(false);
            blocker.reset();
          }}
          onOk={() => {
            setIsOpen(false);
            blocker.proceed();
          }}
        >
          <div>是否退出</div>
        </Modal>
      </>
    );
  };
};

export default WithBlocker;

使用场景：修改一个表单，没有发生改变可以直接退出，有修改进行询问。

import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import WithBlocker from '../../feature/RouteInterception/WithBlocker';
import { Modal } from 'antd';

const Index = (data: any) => {
  const {  setIsIntercept } = data;

  useEffect(() => {
    setIsIntercept(false);
  }, []);

  return <div>home</div>;
};

export default WithBlocker(Index);
自定义弹窗取消和确定事件

需要自定义事件，我们使用的是高阶组件，事件需要从子元素传递给父元素，那就要使用useImperativeHandle这个hook。

import { Modal } from 'antd';
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useBlocker } from 'react-router-dom';

const WithBlocker = (WrappedComponent: React.ComponentType<any>) => {
  return (props: any) => {
    const childRef = useRef<{
      proceed: () => Promise<void>;
      reset: () => Promise<void>;
    }>();
    /** 是否出现弹窗*/
    const [isOpen, setIsOpen] = useState(false);
    /** 是否拦截路由*/
    const [isIntercept, setIsIntercept] = useState(true);
    const blocker: any = useBlocker(
      ({ currentLocation, nextLocation }) => isIntercept && currentLocation.pathname !== nextLocation.pathname
    );

    useEffect(() => {
      if (blocker.state === 'blocked') {
        setIsOpen(true);
      } else {
        setIsOpen(false);
      }
    }, [blocker]);

    return (
      <>
        <WrappedComponent ref={childRef} {...props} setIsIntercept={setIsIntercept} />

        {isIntercept && (
          <Modal
            title="默认弹窗"
            open={isOpen}
            onCancel={() => {
              if (childRef.current) {
                childRef.current
                  .reset()
                  .then(() => {
                    setIsOpen(false);
                    blocker.reset();
                  })
                  .catch(() => {
                    setIsOpen(false);
                    blocker.reset();
                  });
                return;
              }
              setIsOpen(false);
              blocker.reset();
            }}
            onOk={() => {
              if (childRef.current) {
                childRef.current
                  .proceed()
                  .then(() => {
                    setIsOpen(false);
                    blocker.proceed();
                  })
                  .catch(() => {
                    setIsOpen(false);
                    blocker.reset();
                  });
                return;
              }
              setIsOpen(false);
              blocker.proceed();
            }}
          >
            <div>是否退出</div>
          </Modal>
        )}
      </>
    );
  };
};

export default WithBlocker;

使用场景，往往修改完表格退出点击确认，需要调用保存接口，我们使用Promise就可以在请求成功或者失败的时候进行放行和拦截。

import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import WithBlocker from '../../feature/RouteInterception/WithBlocker';
import { Modal } from 'antd';

const Index = forwardRef((data: any, ref: any) => {
  const {  setIsIntercept } = data;

  useImperativeHandle(ref, () => ({
    proceed: () => {
      return new Promise((resolve, reject) => {
        //dosomething
        resolve(true);
      });
    },
    reset: () => {
      return new Promise((resolve, reject) => {
        //dosomething
        resolve(true);
      });
    },
  }));

  return <div>home</div>;
});

export default WithBlocker(Index);
自定义弹窗样式

使用isCustomModule来标记是否需要自定义弹窗，并将isOpen、blocker等传递给子元素。

import { Modal } from 'antd';
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useBlocker } from 'react-router-dom';

const WithBlocker = (WrappedComponent: React.ComponentType<any>) => {
  return (props: any) => {
    const childRef = useRef<{
      proceed: () => Promise<void>;
      reset: () => Promise<void>;
    }>();
    /** 是否出现弹窗*/
    const [isOpen, setIsOpen] = useState(false);
    /** 是否拦截路由*/
    const [isIntercept, setIsIntercept] = useState(true);
    /** 是否使用自定义弹窗*/
    const [isCustomModule, setIsCustomModule] = useState(false);
    const blocker: any = useBlocker(
      ({ currentLocation, nextLocation }) => isIntercept && currentLocation.pathname !== nextLocation.pathname
    );

    useEffect(() => {
      if (blocker.state === 'blocked') {
        setIsOpen(true);
      } else {
        setIsOpen(false);
      }
    }, [blocker]);

    return (
      <>
        <WrappedComponent
          ref={childRef}
          {...props}
          blocker={blocker}
          isOpen={isOpen}
          setIsCustomModule={setIsCustomModule}
          setIsOpen={setIsOpen}
          setIsIntercept={setIsIntercept}
        />

        {!isCustomModule && isIntercept && (
          <Modal
            title="默认弹窗"
            open={isOpen}
            onCancel={() => {
              if (childRef.current) {
                childRef.current
                  .reset()
                  .then(() => {
                    setIsOpen(false);
                    blocker.reset();
                  })
                  .catch(() => {
                    setIsOpen(false);
                    blocker.reset();
                  });
                return;
              }
              setIsOpen(false);
              blocker.reset();
            }}
            onOk={() => {
              if (childRef.current) {
                childRef.current
                  .proceed()
                  .then(() => {
                    setIsOpen(false);
                    blocker.proceed();
                  })
                  .catch(() => {
                    setIsOpen(false);
                    blocker.reset();
                  });
                return;
              }
              setIsOpen(false);
              blocker.proceed();
            }}
          >
            <div>是否退出</div>
          </Modal>
        )}
      </>
    );
  };
};

export default WithBlocker;

我们可以根据接收到的isOpen控制自定义弹窗的显示与否

import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import WithBlocker from '../../feature/RouteInterception/WithBlocker';
import { Modal } from 'antd';

const Index = forwardRef((data: any, ref: any) => {
  const { blocker, isOpen, setIsCustomModule, setIsOpen } = data;

  useEffect(() => {
    setIsCustomModule(true);
  }, []);

  return (
    <>
      <div>home</div>
      <Modal
        title="自定义弹窗"
        open={isOpen}
        onCancel={() => {
          setIsOpen(false);
          blocker.reset();
        }}
        onOk={() => {
          setIsOpen(false);
          blocker.proceed();
        }}
      >
        <div>sadasd</div>
        <div>sadasd</div>
      </Modal>
    </>
  );
});

export default WithBlocker(Index);

结语

感兴趣的可以去试试，有更好的写法可以在评论区说说

程序员玫玫：堪称2024最强的前端面试场景题，已帮助512人成功拿到offer

程序员玫玫
关注
前端实战｜React18极客园——登陆模块（token持久化、路由拦截、mobx、封装axios）
Coding and studying
09-05 3416
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。
React中封装一个高阶组件用于路由鉴权
09-11 481
React中并没有像vue中的路由导航守卫，所以需要自己编写一个路由鉴权的高阶组件实现类似的功能：有token，就可以访问首页，没有token，就跳转到登陆页。高阶组件：一个组件被当作参数传入另一个组件内部使用，也就是children。在需要使用的地方：通过配合Route实现组件的渲染。
路由与高阶组件
qq_45903009的博客
04-12 525
文章目录一：路由1·1：什么是路由1·2：路由的分类1·3：路由模式1·4：路由导航1·5：路由的跳转有两种方式二,路由的基本使用三：路由的相关知识点3·1：精准匹配的使用（exact）3·2:404页面3·3：Switch组件3·4:路由的重定向（redirect）四：二级路由4·1：二级路由的配置4·2：路由的编程式跳转4·3：withRouter组件的使用【HOC】4·3·1：使用步骤：4·3·2：作用4·3·3：路由跳转五：高阶组件【HOC】5.1:什么是高阶组件5·2：封装高阶组件并使用5.3:高
react 高阶组件完成对组件的权限控制
天天的博客
07-14 1340
我们在路由的这一块，我们准备完成vue的类似的权限控制功能 router.beforeEach() 功能，这个功能过react 高阶组件实现，类似Java的代理 Gaojiezujian.js import React, { Component } from 'react' // connect 函数连接以下 import { connect } from "react-redux" // 高阶组件，就是对原来的组件进行封装 import { Route, Redirect } from "reac
react-router v6 路由守卫/路由拦截
weixin_68537886的博客
05-15 1581
封装一个高阶组件，路由鉴权高阶组件，实现未登录拦截，并跳转到登录页面，判断是否有token，如果有，就返回相对应的路由，如果没有就重定向到登录login页面。1.在router文件中封装AuthRouter.js文件。2.在router.js中引入封装的这个高阶组件。
react实现路由拦截器
xiaohua0708day的博客
06-23 389
React Router没有直接的路由拦截器API，但我们可以通过使用<Route>组件的render属性或高阶组件（HOC）来模拟和实现路由拦截的功能。在设计和实现路由拦截时，需要明确拦截的条件和逻辑，并考虑到异步操作和React Router版本等因素。
React/Vue实现路由鉴权/导航守卫/路由拦截
任磊
07-12 1382
React/Vue实现路由鉴权/导航守卫/路由拦截
Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)
Coding and studying
08-30 9159
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。
react-dom-router6 动态渲染路由+路由拦截
布克吉的博客
03-18 2696
动态渲染，顾名思义就是在数据发生改变时根据已有的逻辑自动调整，以不变应万变。第一可以让代码面对复杂的业务需求时，更加灵活和易于维护，第二看起来也更加美观。
在 react 中使用 hooks 封装 路由拦截功能函数
04-18
在上面的代码中，我们使用了 React Router 的 `<Route>` 和 `<Redirect>` 组件，同时使用了 render props 和 Spread Attributes，在高阶组件中对路由进行拦截。如果用户已登录，则显示路由组件，否则将用户重定向到...
vue2学习笔记（高阶）
qq_35876316的博客
12-01 785
abstract 模式针对的是没有浏览器环境的情况，比如 Weex 客户端开发，内部是没有浏览器 API 的，那么 Vue-Router 自身会对环境做校验，强制切换到 abstract 模式，如果默认在 Vue-Router 的配置项中不写 mode 的值，在浏览器环境下会默认启用 Hash 模式，在移动客户端下使用 abstract 模式。由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。
Hbase高阶知识：HBase的协处理器(Coprocessor)原理、使用实例、高级技巧和案例分析
大模型大数据攻城狮的专栏
09-28 742
HBase，作为一个开源的、分布式的、可扩展的以及基于列的NoSQL数据库，已被广泛应用于存储大规模数据集。其架构设计和数据模型是理解HBase工作原理和性能特点的基础。HBase的架构由多个关键组件构成，包括Client、Zookeeper、Master和RegionServer等。其中，Client负责与用户进行交互，接收用户的请求并返回结果；Zookeeper则负责协调和管理HBase集群中的各个组件，确保系统的高可用性；
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 951
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 465
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 566
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1211
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 411
【代码】如何使用Redisson的布隆过滤器？
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 1290
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
探索React高阶组件的深度应用与实战
HOC在这里被用来实现数据订阅和解耦，使得`CommentList`组件专注于呈现，而数据处理逻辑被封装在HOC中。 ```jsx class CommentList extends React.Component { // ...省略构造函数和生命周期方法... render() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值