分享一下在 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 的问题了。

相关推荐
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet14 小时前
那总结下来,react就是落后了
前端·react.js
王解18 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull2 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫2 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom,redux详细解说
react.js