【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案

作者:CSDN-PleaSure乐事

欢迎大家阅读我的博客 希望大家喜欢

使用环境:WebStorm

目录

问题概述

原因

解决方案

解决方法

潜在问题修改

最终效果呈现

额外内容

管理员界面路由配置

WebStorm背景更换

法一:

法二:


问题概述

我们在使用AntDesignPro的umi框架进行客户端界面搭建时,可能会出现左侧菜单栏的名称没有了的情况,就是下面这个“欢迎”和“查询表格”这两段文字和两个“表情”都不显示:

原因

这个消失的原因是我们使用AntDesignPro框架时,在config文件当中的routes.ts的路由配置不完全,即这个文件:

正是因为routes.ts当中缺少name属性才导致此问题出现,因此解决方案就是我们只需要补齐name即可。

进入该ts文件的代码,我们会发现如下代码都缺少name属性,这里是博主已经补全了,所以有name,实际上是没有的,所以才不显示:

解决方案

解决方法

因此,我们只需要补齐代码即可。这里我也将需要修改的代码直接贴出,供大家参考和问题分析:

path: '/user',
    layout: false,
    routes: [
      {
        path: '/user', routes: [
          {name: '登陆', path: '/user/login', component: './user/Login'},
          {name: '注册', path: '/user/register', component: './user/Register'},
        ]
      },
      {component: './404'}
    ],
  },

潜在问题修改

同时,下面的“管理页”相关代码也缺少name属性,会导致后续写管理界面出现问题,我们同样需要及时补充,避免潜在的问题:

{path: '/welcome', name: '欢迎', icon: 'smile', component: './Welcome'},
  {
    path: '/admin',
    name: '管理页',
    icon: 'crown',
    access: 'canAdmin',
    component: './Admin',
    routes: [
      {path: '/admin/sub-page', name: '二级管理页', icon: 'smile', component: './Welcome'},
      {component: './404'},
    ],
  },
  {name: '查询表格', icon: 'table', path: '/list', component: './TableList'},
  {path: '/', redirect: '/welcome'},
  {component: './404'},

最终效果呈现

至此,问题已经解决,我们来看一下最终效果:

这里博主也是对一些敏感信息进行了打码,希望大家谅解:)

额外内容

管理员界面路由配置

如果我们想要在可访问的页面当中,添加一个管理员页面(下方的Admin):

那么我们需要在刚刚的routes.ts路由当中进行补充代码,我们找到path为Admin的部分,并在这一部分的routes当中补充管理员的路由信息:

{path: '/Admin/user-manager', name: '用户管理', icon: 'smile', component: './UserManage'},

在添加完成代码之后,其结构就这样就完整了,大致的结构如下:

{
    path: '/Admin',
    name: '管理页',
    icon: 'crown',
    access: 'canAdmin',
    component: './Admin',
    routes: [
      {path: '/Admin/user-manager', name: '用户管理', icon: 'smile', component: './UserManage'},
      {path: '/Admin/sub-page', name: '二级管理页', icon: 'smile', component: './Welcome'},
      {component: './404'},
    ],
  },

WebStorm背景更换

什么?你说上面看到了我的背景挺好看的?一招教你怎么换背景:

法一:

直接CSDN搜怎么换背景,是不是很快呀!(雾)

法二:

找到设置当中的Appearance,能看到一个Background Image,点这里就可以换背景啦!

作者:CSDN-PleaSure乐事

希望我的博客对您有帮助,也希望在对您有帮助时您可以为我留下点赞收藏与关注,这对我真的很重要,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/911410.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[Joe3] 利用Halo后台注入功能定制Joe3主题页脚内容

1. 前言 如果你正使用Halo博客系统并选择了Joe3主题,你会发现其主题页脚设计非常丰富,也非常美观,可能也是我们选择Joe3的原因吧。但是每个人实际的需求是不同的,默认模板肯定不能都满足,你肯定也希望在页脚部分能有更…

CogVideo模型部署教程

一、 介绍 CogVideo 是一款在开源社区 GitHub 上备受瞩目的 AI 驱动视频生成解决方案,其核心技术依托于前沿的深度学习算法和模型架构。以下是对 CogVideo 的详细介绍: 1. 模型介绍 CogVideoX是 清影 同源的开源版本视频生成模型。 下表展示我们提供的…

【论文复现】基于深度学习的手势识别算法

本文所涉及所有资源均在这里可获取。 📕作者简介:热爱跑步的恒川,致力于C/C、Java、Python等多编程语言,热爱跑步,喜爱音乐、摄影的一位博主。 📗本文收录于论文复现系列,大家有兴趣的可以看一看…

云上拼团GO指南——腾讯云博客部署案例,双11欢乐GO

知孤云出岫-CSDN博客 目录 腾讯云双11活动介绍 一.双十一活动入口 二.活动亮点 (一)双十一上云拼团Go (二)省钱攻略 (三)上云,多类型服务器供您选择 三.会员双十一冲榜活动 (一)活动内容 &#x…

跨境独立站新手,如何用DuoPlus云手机破局海外社媒引流?

独立站作为电商领域的一个重要组成部分,其发展在最近几年里确实令人瞩目,对于想要进入跨境赛道的新手卖家来说,手上握着有优势的货源,建立小型的DTC独立站确实会比入驻第三方平台具有更大的灵活性。本文将给跨境卖家们总结独立站和…

解决VMware和物理机网络不通问题(保姆式教学)

VMware配置网络打通虚拟机和物理机之间得网络通道,并通过xshell连接 配置网络VMware配置虚拟机配置物理机配置Xshell连接其他问题 配置网络 网络配置是通过NAT方式,只要物理机能上网,虚拟机就能上网 VMware配置 网络连接选择NAT方式&#x…

微服务系列三:微服务核心——网关路由

目录 前言 一、登录存在的问题归纳 二、*微服务网关整体方案 三、认识微服务网关 四、网关鉴权实现 五、OpenFeign微服务间用户标识信息传递实现 六、微服务网关知识追问巩固 实验环境说明 本文有部分地方需要实验进行。首先对于看过黑马微服务的同学应该会比较熟悉。…

在第三方公有云服务器上部署AS-V1000视频接入汇聚平台,请求视频出现黑屏的问题解决

目录 一.背景和问题描述 1.1平台介绍 1.2背景和问题描述 二.排查流程 2.1初步解析 2.2排查服务器防火墙 2.3排查平台模块 2.3.1排查sippgw模块 2.3.2排查mrrs模块 2.3.3排查平台公网设置 2.4排查安全组 三.问题解决过程和结果 3.1问题解决过程 3.2问题解决结果 一…

学习threejs,使用对象组合

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.Object3D 三维物体 二…

从技术创新到商业应用,智象未来(HiDream.ai)创新不止步

在人工智能领域的最新动态中,智象未来(HiDream.ai)公司,作为全球领先的多模态生成式人工智能技术先驱,已经引起了广泛的行业瞩目。该公司专注于深度学习和计算机视觉技术的融合,致力于开发和优化视觉多模态…

数据血缘追踪是如何在ETL过程中发挥作用?

在大数据环境下,数据血缘追踪具有重要意义,它能够帮助用户了解数据的派生关系、变换过程和使用情况,进而提高数据的可信度和可操作性。通过数据血缘追踪,ETL用户可以准确追溯数据的来源,快速排查数据异常和问题。 一、…

八、Spring Boot集成Spring Security之前后分离认证最佳实现测试

文章目录 往期回顾:Spring Boot集成Spring Security专栏及各章节快捷入口前言一、正常流程测试1、登录接口测试2、业务接口测试3、登出接口测试 二、非正常流程测试1、输入错误用户名密码登录2、无请求头访问业务接口3、无效请求头访问业务接口4、登出时未携带有效请…

OCM认证备考技巧

Oracle Certified Master(OCM)认证是Oracle公司颁发的顶级专业资格认证,它专为那些旨在验证其在Oracle数据库管理领域拥有深厚专业知识和高级技能的专业人士设计。这一认证标志着持有者在数据库性能优化、备份恢复、高级配置以及故障排除等方…

动态规划理论基础和习题【力扣】【算法学习day.25】

前言 ###我做这类文档一个重要的目的还是给正在学习的大家提供方向(例如想要掌握基础用法,该刷哪些题?)我的解析也不会做的非常详细,只会提供思路和一些关键点,力扣上的大佬们的题解质量是非常非常高滴&am…

kafka+zookeeper的搭建

kafka从2.8版本开始,就可以不用配置zookeeper了,但是也可以继续配置。我目前使用的kafka版本是kafka_2.12-3.0.0.tgz,其中前面的2.12表示是使用该版本的scala语言进行编写的,而后面的3.00才是kafka当前的版本。 通过百度网盘分享…

智象未来(HiDream.ai):从科技创新启程,绘制智能未来新篇章

在人工智能领域飞速演进的当下,智象未来(HiDream.ai)作为全球领先的多模态生成式人工智能技术供应商,正以其独树一帜的视觉多模态大模型及创新应用,推动行业趋势的前进。智象未来(HiDream.ai)自…

给电脑加水印的软件有哪些?分享5个快速添加水印的小神器,快来试试!

怎么给电脑加水印呢? 如果一个个手动添加水印,不仅费时费力,还容易出错。那么,有没有更方便快捷的方法呢? 答案是肯定的!市面上有许多专门给电脑加水印的软件,能够快速高效地实现这一目的。接下…

mac m1 docker本地部署canal 监听mysql的binglog日志

mac m1 docker本地部署canal监听mysql的binglog日志(虚拟机同理) 根据黑马视频部署 1.docker 部署mysql 1.docker拉取mysql 镜像 因为m1是arm架构.需要多加一条信息 正常拉取 docker pull mysql:tagm1拉取 5.7的版本. tag需要自己指定版本 docker pull --platform linux/x…

TARE-PLANNER学习记录

参考: CMU-TARE 探索算法官方社区问答汇总_cmu localplanner 部署-CSDN博客 Tare_planner学习笔记_tare planner-CSDN博客 Tare_planner 学习教程(二)_tareplanner-CSDN博客 (学习笔记)机器人自主导航从零开始第七步——TARE Planner自主…