umi4 ant design

在UMI4中，Ant Design Pro已经内置了多Tabs功能，你可以通过在配置文件config/config.ts中新增以下两个配置项来启用多Tabs布局：

keepalive: [/./],
tabsLayout: {}

只需进行这些简单的配置，其他部分无需更改。然后刷新页面，就可以看到多Tabs的效果了。关于这个功能的文档比较少，你可以查看源码来了解更多细节。如果你需要在某个页面退出时同时关闭对应的Tabs，你可以使用以下方式实现：

import { KeepAliveContext, useLocation } from '@umijs/max';
import { useContext } from 'react';

function YourComponent() {
  const KeepAlive = useContext(KeepAliveContext);
  const location = useLocation();

  // 取消（去新的页面并且，关闭 Tabs） 
  function cancelControl() {
    delete KeepAlive.keepElements.current<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
-  *1* [Umi +ant-design4 proComponent实践demo](https://blog.csdn.net/hzxOnlineOk/article/details/116268435)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
-  *2* [Umi4 antDesign Pro 实现多 tabs (keep-alive)](https://blog.csdn.net/weixin_40639095/article/details/129983297)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]