分享一下在 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、首页隐藏侧边栏，其他页面展示侧边栏(登录页除外)

效果图展示

代码实现，在 $a p p . t s x \color{red}{app.tsx}$ app.tsx中，有个 $o n P a g e C h a n g e \color{red}{onPageChange}$ onPageChange函数，该函数会在页面切换时触发，我们可以在该函数触发时，根据url地址判断当前是那个页面，如果是首页就可以用css+js去隐藏侧边栏。其它页面再让侧边栏显示。

代码片段

js 复制代码

      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)

代码片段

js 复制代码

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

3、页面整体布局调整

代码实现

js 复制代码

  body{
  zoom: 80%;
  }

4、umi3升级到umi4

location 中的 query 找不到？

location 中的 query 不再支持了，后续推荐用 search

js 复制代码

- 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 增加 $p a r e n t K e y s \color{red}{parentKeys}$ parentKeys

效果展示

可以看到增加了 $p a r e n t K e y s \color{red}{parentKeys}$ parentKeys 后，查询表格页面的高亮并没有消失。

如果是动态路由，前端就需要和后端商量怎么去处理 $p a r e n t K e y s \color{red}{parentKeys}$ parentKeys 的问题了。