AntDesignPro模板⽆多标签页解决⽅案⽩嫖了⽆尽岁⽉，我也来写个博客。希望能帮到你！
⽹上⼀些⽅案都是把官⽅模板替换成⾃⼰写的。本⼈的⽅案是在模板的基础上进⾏添砖加⽡，理解起来更容易！
解决思路是：
记录页⾯切换时的路由（onPageChange），在内容部分进⾏动态渲染（myhref）。
注：
我们十五个使⽤uState对数组进⾏更新时，需要以新数组的形式对赋值。如：thref([...array]);
/**
* Ant Design Pro v4 u `@ant-design/pro-layout` to handle Layout.
*
* @e You can view component api by: /ant-design/ant-design-pro-layout
*/
import ProLayout, { DefaultFooter, SettingDrawer, getMenuData } from '@ant-design/pro-layout';
import React, { uEffect, uMemo, uRef, uState } from 'react';
import { Link, uIntl, 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 '../asts/logo.svg';
const { TabPane } = Tabs;
const pagesNum = 2; // 设置页签数量
const noMatch = (
<Result
status={403}
title="403"
subTitle="Sorry, you are not authorized to access this page."
extra={
筛选快捷键是什么
<Button type="primary">
居家养老服务项目<Link to="/ur/login">Go Login</Link>
</Button>
}
/>
);
/
** U 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,
location = {
pathname: '/',
},
route = {
routes: [],
},
} = props;
const [myhref, thref] = uState([]);
const menuDataRef = uRef([]);
uEffect(() => {
if (dispatch) {
dispatch({
type: 'ur/fetchCurrent',
});
}
}, []);
/** Init variables */
const handleMenuCollap = (payload) => {
if (dispatch) {设计实习日志
dispatch({
type: 'global/changeLayoutCollapd',
payload,
});
}
}; // get children authority
const authorized = uMemo(
() =>
getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || { authority: undefined,
},
[location.pathname],
);
const { formatMessage } = uIntl();
const { routes = [] } = route;
const { breadcrumb } = getMenuData(routes);
/**
* 记录切换路由历史
*/
const pageChange = (local) => {
const value = breadcrumb[local.pathname];
const array = myhref;
let flag = fal; // 标识没有相同值
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);
thref([...array]);
}
};
const onChange = (key) => {
for (let i = 0; i < myhref.length; i += 1) {
if (key === myhref[i].key) {
history.push(myhref[i].key);
}
};
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);
thref([...array]);
break;
}
}
};
return (
<>
<ProLayout
logo={logo}
大明皇帝
// formatMessage={formatMessage} 关闭语⾔国际化
{...props}
{...ttings}
onPageChange={pageChange}
onCollap={handleMenuCollap}
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 (ttings.footerRender || ttings.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>
<SettingDrawer
ttings={ttings}
onSettingChange={(config) =>
dispatch({
type: 'ttings/changeSetting',
payload: config,
})
}
/>
</>
);
};
明德英export default connect(({ global, ttings }) => ({
collapd: llapd,
ttings,
}))(BasicLayout);
以下是效果图：
