Ant Design Pro模板无多标签页解决方案

白嫖了无尽岁月，我也来写个博客。希望能帮到你！

网上一些方案都是把官方模板替换成自己写的。本人的方案是在模板的基础上进行添砖加瓦，理解起来更容易！

解决思路是：

记录页面切换时的路由（onPageChange），在内容部分进行动态渲染（myhref）。

注：

使用useState对数组进行更新时，需要以新数组的形式对赋值。如：sethref([...array]);

/*** Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.** @see You can view component api by: https://github.com/ant-design/ant-design-pro-layout*/
import ProLayout, { DefaultFooter, SettingDrawer, getMenuData } from '@ant-design/pro-layout';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useIntl, connect, history } from 'umi';
import { Result, Button, Tabs } from 'antd';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import { getMatchMenu } from '@umijs/route-utils';
import logo from '../assets/logo.svg';const { TabPane } = Tabs;
const pagesNum = 2; // 设置页签数量
const noMatch = (<Resultstatus={403}title="403"subTitle="Sorry, you are not authorized to access this page."extra={<Button type="primary"><Link to="/user/login">Go Login</Link></Button>}/>
);/** Use Authorized check all menu item */
const menuDataRender = (menuList) =>menuList.map((item) => {const localItem = {...item,children: item.children ? menuDataRender(item.children) : undefined,};return Authorized.check(item.authority, localItem, null);});const defaultFooterDom = (<DefaultFooter copyright={`${new Date().getFullYear()} XXXX`} links={[]} />
);const BasicLayout = (props) => {const {dispatch,children,settings,location = {pathname: '/',},route = {routes: [],},} = props;const [myhref, sethref] = useState([]);const menuDataRef = useRef([]);useEffect(() => {if (dispatch) {dispatch({type: 'user/fetchCurrent',});}}, []);/** Init variables */const handleMenuCollapse = (payload) => {if (dispatch) {dispatch({type: 'global/changeLayoutCollapsed',payload,});}}; // get children authorityconst authorized = useMemo(() =>getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {authority: undefined,},[location.pathname],);const { formatMessage } = useIntl();const { routes = [] } = route;const { breadcrumb } = getMenuData(routes);/*** 记录切换路由历史*/const pageChange = (local) => {const value = breadcrumb[local.pathname];const array = myhref;let flag = false; // 标识没有相同值for (let i = 0; i < array.length; i += 1) {if (value.key === array[i].key) {flag = true;}}if (!flag) {if (array.length > pagesNum) {array.splice(0, 1);}array.push(value);sethref([...array]);}};const onChange = (key) => {for (let i = 0; i < myhref.length; i += 1) {if (key === myhref[i].key) {history.push(myhref[i].key);break;}}};const onEdit = (targetKey, action) => {const array = myhref;for (let i = 0; i < myhref.length; i += 1) {if (targetKey === myhref[i].key) {array.splice(i, 1);sethref([...array]);break;}}};return (<><ProLayoutlogo={logo}// formatMessage={formatMessage} 关闭语言国际化{...props}{...settings}onPageChange={pageChange}onCollapse={handleMenuCollapse}onMenuHeaderClick={() => history.push('/')}menuItemRender={(menuItemProps, defaultDom) => {if (menuItemProps.isUrl ||!menuItemProps.path ||location.pathname === menuItemProps.path) {return defaultDom;}return <Link to={menuItemProps.path}>{defaultDom}</Link>;}}breadcrumbRender={(routers = []) => [{path: '/',breadcrumbName: formatMessage({id: 'menu.home',}),},...routers,]}itemRender={(route, params, routes, paths) => {const first = routes.indexOf(route) === 0;return first ? (<Link to={paths.join('/')}>{route.breadcrumbName}</Link>) : (<span>{route.breadcrumbName}</span>);}}footerRender={() => {if (settings.footerRender || settings.footerRender === undefined) {return defaultFooterDom;}return null;}}menuDataRender={menuDataRender}rightContentRender={() => <RightContent />}postMenuData={(menuData) => {menuDataRef.current = menuData || [];return menuData || [];}}><Authorized authority={authorized.authority} noMatch={noMatch}><Tabs hideAdd type="editable-card" onChange={onChange} onEdit={onEdit}>{myhref.map((pane) => (<TabPane tab={pane.name} key={pane.key}></TabPane>))}</Tabs>{children}</Authorized></ProLayout><SettingDrawersettings={settings}onSettingChange={(config) =>dispatch({type: 'settings/changeSetting',payload: config,})}/></>);
};export default connect(({ global, settings }) => ({collapsed: global.collapsed,settings,
}))(BasicLayout);

以下是效果图：

Ant Design Pro模板无多标签页解决方案相关推荐

ant design pro模板_Ant Design Pro入门教程，安装，运行（V5 Typescript版）
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
ant design pro模板_Ant Design Pro 学习笔记
学习笔记摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
ant design pro模板_ant design pro 当中改变ant design 组件的样式和数据管理
ant design pro 简介官网简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续 ...
ant design pro v5 - 07 多标签窗口多窗口打开
1 安装组件: 安装 yarn add umi-plugin-keep-alive 2 创建模板:/src/services/types/menu.ts export interface menuTa ...
Ant Design Pro 开启默认进入登录页
src/utils/authority.js getAuthority方法中 return authority || ['admin']; 改为 return authority || ['guest ...
ant design pro模板_分享10 个开源免费且优秀的后台管理系统模板
Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者使用,那么有哪些优秀的开源免费的控制面板呢?我在 Github 上收集 ...
React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
ant design pro V2 学习笔记
该笔记分为两部分,前面部分为官方文档介绍,后面为实际项目改造的历程本文档不定时更新,你想要的在实战部分如果你对react.dva等一些概念不是很清晰,建议先看以下概念: react:https:/ ...
ant design pro（二）布局
一.概述参看地址:https://pro.ant.design/docs/layout-cn 其实在上述地址ant-design上已经有详细介绍,本文知识简述概要. 页面整体布局是一个产品最外层的框 ...

Ant Design Pro模板无多标签页解决方案

Ant Design Pro模板无多标签页解决方案相关推荐

最新文章

热门文章