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,提升效率,增加摸鱼时间~~~

相关推荐
伍哥的传说42 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
G等你下课2 小时前
React 事件机制原理
前端·react.js
遂心_2 小时前
深入剖析React待办事项应用:Hooks、组件化与性能优化实战
前端·react.js·前端框架
小山不高2 小时前
react封装指令式组件
前端·react.js
爱学习的茄子2 小时前
深入解析React事件机制:从原生DOM到合成事件的演进
前端·react.js·面试
前端小趴菜0511 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~12 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
ohMyGod_12318 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜0518 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界18 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript