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

效果图展示

代码实现,在 <math xmlns="http://www.w3.org/1998/Math/MathML"> a p p . t s x \color{red}{app.tsx} </math>app.tsx中,有个 <math xmlns="http://www.w3.org/1998/Math/MathML"> o n P a g e C h a n g e \color{red}{onPageChange} </math>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 增加 <math xmlns="http://www.w3.org/1998/Math/MathML"> p a r e n t K e y s \color{red}{parentKeys} </math>parentKeys

效果展示

可以看到 增加了 <math xmlns="http://www.w3.org/1998/Math/MathML"> p a r e n t K e y s \color{red}{parentKeys} </math>parentKeys 后,查询表格页面的高亮并没有消失。

如果是动态路由,前端就需要和后端商量怎么去处理 <math xmlns="http://www.w3.org/1998/Math/MathML"> p a r e n t K e y s \color{red}{parentKeys} </math>parentKeys 的问题了。

相关推荐
wen's7 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
Jackson_Mseven14 小时前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
前端小盆友16 小时前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
OLong17 小时前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
摸鱼仙人~17 小时前
重塑智能体决策路径:深入理解 ReAct 框架
前端·react.js·前端框架
namehu17 小时前
浏览器中的扫码枪:从需求到踩坑再到优雅解决
前端·react.js
杨进军17 小时前
React 使用 MessageChannel 实现异步更新
react.js
namehu17 小时前
浏览器中的打印魔法:Lodop与系统打印机
前端·react.js
如果'\'真能转义说18 小时前
React自学 基础一
前端·react.js·前端框架
巴巴_羊18 小时前
react setstate
react.js