【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乐事

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一文透彻了解电容

文章目录 一、电容的作用二、电容的选择三、电容的分类四、多层陶瓷电容五、钽电容替代电解电容的误区六、旁路电容的应用问题七、电容的等效串联电阻 ESR八、电解电容的电参数九、电容器参数的基本公式十、电源输入端的 X,Y 安全电容 一、电容的作用 作为无源元件之一的电容&…

Python OpenCV 傅里叶变换

傅里叶变换 傅里叶变换比较难和不容易理解,有错的地方请见谅 傅里叶原理表明:任何连续测量的时序或信号,都可以表示为不同频率的正弦波信号的无限叠加。也就是说,傅里叶变换是一种特殊的积分变换,它能将满足一定条件的…

如何调整pdf的页面尺寸

用福昕阅读器打开pdf,进入打印页面,选择“属性”,在弹出的页面选择“高级” 选择你想调成的纸张尺寸,然后打印,打印出来的pdf就是调整尺寸后的pdf

WPF中如何简单的使用CommunityToolkit.Mvvm创建一个项目并进行 增删改查

目录 开始前准备的数据库dbblog如下: 第一步:创建项目后下载四个NuGet程序包 第二步:删除原本的MainWindow.XAML文件 并创建如下的目录结构 然后在View文件夹下面创建Login.XAML和Main.XAML 并且在App.XAML中将启动项改为Login.X…

基于python多准则决策分析的汽车推荐算法设计与实现

摘要 随着汽车市场的快速发展和消费者需求的多样化,汽车选择变得愈加复杂。为了帮助消费者在众多汽车选项中做出明智的决策,基于多准则决策分析(MCDA)的汽车推荐算法应运而生。本研究旨在设计和实现一种基于 Python 的汽车推荐系…

xftp连接中不成功 + sudo vim 修改sshd_config不成功的解决方法

我们使用sudo vim不成功,但是我们使用sudo su就可以 了! root用户权利更大! 喵的,终于成功了,一个xftp连接半天不成功。(添加上面的内容就可以连接成功了↑)

vue:Transition

1. Transition 1. 基本用法 <Transition> 是Vue 提供的 “内置组件动画组件”&#xff0c;与一般的CSS过渡动画不同的是&#xff0c;它通过在特点时刻给元素或组件增加、移除类名来实现——在一个元素或组件进入和离开 DOM 时应用过渡动画。 下面是一个基本用法&#…

Python 中的字符串匹配算法

在 Python 中&#xff0c;字符串匹配算法用于在一个字符串中寻找一个子串的出现位置&#xff0c;这是许多文本处理任务的核心。下面我将介绍几种常用的字符串匹配算法以及它们在 Python 中的实现方式。 1、问题背景 在 Python 中&#xff0c;字符串匹配是一个非常重要的操作&a…

配置本地策略路由示例

组网需求 RouterA与RouterB间有两条链路相连。 用户希望实现本机下发的不同长度的报文通过不同的下一跳地址进行转发&#xff0c;其中&#xff1a; 长度为64&#xff5e;1400字节的报文设置192.168.1.2作为下一跳地址。长度为1401&#xff5e;1500字节的报文设置192.168.2.2…

【大数据学习 | kafka高级部分】文件清除原理

2. 两种文件清除策略 kafka数据并不是为了做大量存储使用的&#xff0c;主要的功能是在流式计算中进行数据的流转&#xff0c;所以kafka中的数据并不做长期存储&#xff0c;默认存储时间为7天 那么问题来了&#xff0c;kafka中的数据是如何进行删除的呢&#xff1f; 在Kafka…

推荐一款基于Flash的交互式园林设计工具:Garden Planner

Garden Planner是一款由Artifact Interactive开发的基于Flash的交互式园林设计工具。它允许用户以拖放的方式安排植物、树木、建筑物和各种对象&#xff0c;使园林规划变得简单直观。此外&#xff0c;Garden Planner提供工具来快速创建铺路、路径和围栏&#xff0c;帮助用户设计…

微信小程序开发,诗词鉴赏app,诗词推荐实现(二)

微信小程序开发&#xff0c;诗词鉴赏app&#xff08;一&#xff09;&#xff1a; https://blog.csdn.net/jky_yihuangxing/article/details/143501681微信小程序开发&#xff0c;诗词鉴赏app&#xff0c;诗词推荐实现&#xff08;二&#xff09;:https://blog.csdn.net/jky_yih…

关于诊断中的各种时间参数

前言&#xff1a; 因为不会转载&#xff0c;故在这里贴出原文连接&#xff0c;写的非常好&#xff01;条理清晰&#xff0c;一遍看懂king110108 原文链接&#xff1a;UDS之时间参数总结篇_uds时间参数-CSDN博客 以下内容是我自己对这篇文章的一些备注和理解&#xff0c;以及从测…

技术干货|HyperMesh CFD功能详解:虚拟风洞 Part 2

在上期 Part 1文章中&#xff0c;我们介绍了从 v2023 版本开始&#xff0c;虚拟风洞VWT&#xff08;Virtual Wind Tunnel&#xff09;模块合并到HyperMesh CFD中。用户在VWT模块中完成LBM求解器ultraFluidX的前处理设置&#xff0c;导出参数文件XML和模型文件STL&#xff0c;并…

H7-TOOL的CAN/CANFD助手增加帧发送成功标识支持, 继续加强完善功能细节

2.27版本固件正式携带此功能&#xff0c;包括之前做的负载率检测和错误信息展示也将集成到这个版本固件中。 对于接收&#xff0c;我们可以直接看到效果&#xff0c;而发送不行&#xff0c;所以打算在发送的地方展示下发送成功标识。CAN发送不像串口&#xff0c;需要等待应答后…

mysql5安装

1.下载安装包 https://downloads.mysql.com/archives/community/ mysql-5.7.44-1.el7.x86_64.rpm-bundle.tar tar -xvf mysql-5.7.44-1.el7.x86_64.rpm-bundle.tar2.安装依赖 yum -y install perl yum -y install net-tools yum install numactl libaio libaio-devel -y也可…

大模型应用编排工具Dify二开之工具和模型页面改造

1.前言 简要介绍下 dify&#xff1a; ​ 一款可以对接市面上主流大模型的任务编排工具&#xff0c;可以通过拖拽形式进行编排形成解决某些业务场景的大模型应用。 背景信息&#xff1a; ​ 环境&#xff1a;dify-0.8.3、docker-21 ​ 最近笔者在做 dify的私有化部署和二次…

开放寻址法、链式哈希数据结构详细解读

一、开放寻址法&#xff08;Open Addressing&#xff09; 1. 定义 开放寻址法是一种哈希冲突解决策略&#xff0c;所有元素都存储在哈希表中。当发生冲突时&#xff0c;即两个键计算出的哈希值相同时&#xff0c;会按照一定的探查序列查找下一个可用的位置来存储新元素。 2.…

并查集(基础学习与应用)

并查集 基本原理&#xff1a; 对于多个集合&#xff0c;每个集合中的多个元素用一颗树的形式表示&#xff0c;根节点的编号即为整个集合的编号&#xff0c;每个树上节点存储其父节点&#xff0c;使得当前集合的每个子节点都可以通过对父节点的询问来找到根节点&#xff0c;根…

基于 Encoder-only 架构的大语言模型

基于 Encoder-only 架构的大语言模型 Encoder-only 架构 Encoder-only 架构凭借着其独特的双向编码模型在自然语言处理任务中表现出色&#xff0c;尤其是在各类需要深入理解输入文本的任务中。 核心特点&#xff1a;双向编码模型&#xff0c;能够捕捉全面的上下文信息。 En…