前情


公司经常需要做一些后台管理页面,我们选择了Ant Design Pro,它是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案。

坑位


按官方文挡一步步下来,项目启动后发现控制台就有一个报错,报错截图如下:

Why?


从报错的提示看是项目出现了a标签嵌套a标签的情况,最终对页面上有跳转功能的地方做了一遍筛查,发现是在面包屑那里出现了a标签嵌套a标签,详情见下图:

解决方案


重写面包屑渲染方法即可,通过在项目下src/app.tsx文件中重写itemRender方法即可

关键代码:


	...
itemRender: (route: any, params, routes) => {
return <span>{route.breadcrumbName}</span>
},
...

Ant Design Pro项目一初始化就报a标签嵌套a标签错误<a> cannot as a descendant of <a>的更多相关文章

  1. Ant Design Pro项目打开页设为登录或者其他页面

    Ant Design Pro项目打开页设为登录或者其他页面 一.打开页设为登录页 首先找到utils包中的authority文件,在该文件中找到如下代码: export function getAut ...

  2. 【后台管理系统】—— Ant Design Pro 项目爬坑(一)

    1.表单rule中可以分对象处理不同规则 <FormItem label="类型名称" {...formLayout}> { form.getFieldDecorato ...

  3. ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

  4. 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)

    前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...

  5. 使用ant design pro搭建项目

    脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-proje ...

  6. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  7. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行

    ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以 ...

  8. ant design pro (十二)advanced UI 测试

    一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...

  9. Ant Design Pro入门教程,安装,运行(V5 Typescript版)

    [前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...

  10. Ant Design Pro V5 与 IdentityServer 实现 Password 模式的登录

    最近处于休息状态,想趁着休息时间,为自己做一个后台. 后端框架选用了 Abp.之前公司使用了一些自研的框架,但由于人力资源有限,后期框架的升级及维护都是比较耗时,这次干脆直接使用Abp,即省心又能快速 ...

随机推荐

  1. pimp技法浅析--实现轻量级的面向接口编程

    pimp.hpp: #ifndef pimp_hpp #define pimp_hpp class CMyComponent{ public: CMyComponent(); ~CMyComponen ...

  2. Hugging Face 论文平台 Daily Papers 功能全解析

    文/ Adeena, 在快速发展的研究领域,保持对最新进展的关注至关重要.为了帮助开发者和研究人员跟踪 AI 领域的前沿动态,Hugging Face 推出了 Daily Papers 页面.自发布以 ...

  3. Kubernetes ReplicaSet 控制器(十九)

    前面我们一起学习了 Pod 的原理和一些基本使用,但是在实际使用的时候并不会直接使用 Pod,而是会使用各种控制器来满足我们的需求,Kubernetes 中运行了一系列控制器来确保集群的当前状态与期望 ...

  4. Kernel调试追踪技术之 Kprobe on ARM64

    kprobe是什么? kprobe 是一种动态调试机制,用于debugging,动态跟踪,性能分析,动态修改内核行为等,2004年由IBM发布,是名为Dprobes工具集的底层实现机制[1][2],2 ...

  5. 来参与Oracle VS openGauss 在线研讨,与盖国强老师、李国良教授面对面!

    11月11日下午14点,墨天轮社区邀请到两位数据库领域的巅峰人物:Oracle ACED 盖国强老师,和来自清华大学计算机与技术系的李国良教授,他们将进行一场"巅峰对话". 墨天轮 ...

  6. vue的计算属性computed和监视属性waatch的区别

    共同的:都是用于监听数据变化的属性: 计算属性:必须有返回值return ,依赖其它属性值,其它属性值发生变化的时候就会重新计算 : 监视属性:每当数据变化的时候就会触发执行,watch有两个新值和旧 ...

  7. OpenFunction v0.8.0 发布:通过 Dapr Proxy 加速函数启动

    相较于其他函数计算项目,OpenFunction 有很多独特的功能,其中之一便是通过 Dapr 与各种后端服务(BaaS)无缝集成.目前 OpenFunction 已经支持了 Dapr 的 pub/s ...

  8. C# 动态调用webservice代码

    /// <summary> /// 动态调用WebService /// </summary> /// <param name="url">UR ...

  9. ES6语法特性

    ES6语法特性 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了. 它的目标,是使得 JavaScript 语言 ...

  10. att&ck学习笔记1

    一.环境搭建 1.1环境搭建测试 最近想要开始学习内网渗透,搜集了一些教程,准备先实验一个vulnstack靶机,熟悉一下内网渗透操作再学习基础知识. 靶场下载地址:http://vulnstack. ...