React关闭缓存标签页刷新页面的hooks

在后台系统中有Form单页面时,执行了新增或者编辑完都要求关闭当前页回到列表页并执行刷新

用了hooks实现后,记录下来方便后续也给大伙分享,这个并没过多的复杂逻辑,需要用时直接CV就好

/** 复制代码
 * @hook useCloseTabPage: 用于关闭当前刷新页面
 * */

type closeCurPageAndReloadAppointPage = (reloadPage?: string) => void
type refreshAppointPage = ((path: string) => void);
type dropScope = (name: string | RegExp) => Promise<boolean>
type closeCurPageAndJumpToNewPage = (reloadPage?: string, newPage?: string) => void


type CloseProps = [
    closeCurPageAndReloadAppointPage,
    refreshAppointPage,
    dropScope,
    closeCurPageAndJumpToNewPage
]

const useCloseTabPage = (): CloseProps=> {
    const { dropScope, refreshScope } = useAliveController();
    // 刷新指定页面
    const refreshAppointPage = (path: string) => {
        if (path) {
            refreshScope(path);
        }
    };
    // 关闭当前页面
    const closeCurPageAndReloadAppointPage = (reloadPage?: string) => {
        if (reloadPage) {
            refreshScope(reloadPage);
        }
        dropScope(window.location?.hash?.slice(1));
        history.goBack();
    };
    //关闭当前页面并跳转新页面
    const closeCurPageAndJumpToNewPage = (reloadPage?: string, newPage?: string) => {
        if (reloadPage) {
            refreshScope(reloadPage);
        }
        dropScope(window.location?.hash?.slice(1));
        if (newPage) {
            history.push({
                pathname: newPage,
            });
        }
    };
    return [closeCurPageAndReloadAppointPage, refreshAppointPage, dropScope, closeCurPageAndJumpToNewPage];
};

export default useCloseTabPage;

引入hooks

import useCloseTabPage from '@/app/hooks/useCloseTabPage';

顶部声明变量

const [refreshAppointPage] = useCloseTabPage();

最后调用即可

refreshAppointPage('/rbacRole/rbacRoleList');

最后愿大家都能快速CV,提升效率,增加摸鱼时间~~~

相关推荐
伍哥的传说36 分钟前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
前端小盆友7 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
Cacciatore->8 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~8 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末8 小时前
React——基础
前端·react.js·前端框架
爱学习的茄子9 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
10年前端老司机9 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
sophie旭9 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
轻语呢喃9 小时前
React智能前端:从零开始写的图片分析页面实战
前端·react.js·aigc