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

作者:CSDN-PleaSure乐事

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

使用环境:WebStorm

目录

问题概述

原因

解决方案

解决方法

潜在问题修改

最终效果呈现

额外内容

管理员界面路由配置

WebStorm背景更换

法一:

法二:


问题概述

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

原因

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

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

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

解决方案

解决方法

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

javascript 复制代码
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属性,会导致后续写管理界面出现问题,我们同样需要及时补充,避免潜在的问题:

javascript 复制代码
{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当中补充管理员的路由信息:

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

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

javascript 复制代码
{
    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乐事

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

相关推荐
拓端研究室40 分钟前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子2 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W3 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端4 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程4 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏4 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083165 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头6 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's6 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js