分享一下在 React + Umi + Ant Design Pro 的项目中，遇到的一些需求和问题的解决方案

（最近公司搬家，图片拍摄于公司旧址）

前语介绍

1、什么是umi

Umi 是一个可扩展的企业级前端应用结构，它以路由为基础，同时支撑装备式路由和约定式路由，保证路由的功用完备，并以此进行功用扩展。Umi 还配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支撑各种功用扩展和事务需求。Umi 供给了丰厚的功用和灵活的扩展机制，使开发者能够快速构建高质量的前端应用。

官方网站：UmiJS – 插件化的企业级前端应用结构

2.什么是Ant Design Pro

Ant Design Pro 是依据 Ant Design 和 umi 的封装的一整套企业级中后台前端/规划处理方案，供给了丰厚的组件和模板，能够快速建立高质量的中后台体系。Ant Design Pro 还供给了丰厚的开箱即用的功用，如权限办理、国际化、数据可视化、代码生成等，能够大大提高开发功率。Ant Design Pro 适用于各种类型的中后台体系，包含办理后台、数据分析渠道、物联网控制台等。

官方网站：开箱即用的中台前端/规划处理方案 – Ant Design Pro

需求、问题的处理和完成方案

1、主页躲藏侧边栏，其他页面展现侧边栏(登录页在外)

作用图展现

      const doc = document.getElementsByClassName("ant-layout-sider")[0]
      const previousSibling = doc?.previousElementSibling;
        if(history.location.pathname==="/welcome"){
          if(doc){
          doc.style.display = "none"
          }
          if(previousSibling){
          previousSibling.style.display = "none"
          }
        }else{
          if(doc){
          doc.style.display = "block"
          }
          if(previousSibling){
          previousSibling.style.display = "block"
          }
        }

2、tabs 多页签

作用图展现

​

代码完成，本来Ant Design Pro 内置了多 tabs 布局，只需要在config.ts中开启就行。可是这个内置多页签的功用官方文档上并没有写，我是参阅了一些文章才找到这个功用的。

文章地址：网友需求 – Ant Design Pro 内置的多 tabs 布局 – (juejin.cn)

我也发现了，有些文章是手写的多页签功用，我之前参阅该文章完成过。

文章地址1：几十行完成 Ant Design Pro v6 的多页签功用 – (juejin.cn)

文章地址2：手把手带你依据ant design pro 5完成多tab页(路由keepalive) – (juejin.cn)

  //tabs多页签
  keepalive: [/./],
  tabsLayout: {
  hasDropdown: true, //有右侧下拉菜单
  hasFixedHeader:true, //吸顶作用
  },

3、页面整体布局调整

代码完成

  body{
  zoom: 80%;
  }

4、umi3升级到umi4

location 中的 query 找不到？

location 中的 query 不再支撑了，后续引荐用search

- const { query } = history.location;
+ import { parse } from 'query-string';
+ const query = parse(history.location.search);

官网地址：升级到 Umi 4 (umijs.org)

5、重定向菜单的高亮

参阅官网地址：菜单的高级用法 – Ant Design Pro

新增路由 /Son 和 /list 是同级联系

正常作用，路由跳转到 /Son ，菜单查询表格取消高亮

路由/son 添加$parentKeys$

能够看到 添加了$parentKeys$ 后，查询表格页面的高亮并没有消失。

如果是动态路由，前端就需要和后端商议怎么去处理 $parentKeys$ 的问题了。