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

在广东捡破烂的吴彦祖2025-03-18 14:06

在后台系统中有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，提升效率，增加摸鱼时间~~~