Ant Design Pro项目一初始化就报a标签嵌套a标签错误<a> cannot as a descendant of <a>
前情
公司经常需要做一些后台管理页面,我们选择了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>的更多相关文章
- Ant Design Pro项目打开页设为登录或者其他页面
Ant Design Pro项目打开页设为登录或者其他页面 一.打开页设为登录页 首先找到utils包中的authority文件,在该文件中找到如下代码: export function getAut ...
- 【后台管理系统】—— Ant Design Pro 项目爬坑(一)
1.表单rule中可以分对象处理不同规则 <FormItem label="类型名称" {...formLayout}> { form.getFieldDecorato ...
- ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...
- 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)
前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...
- 使用ant design pro搭建项目
脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-proje ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验 最近需要讲AntD Pro项目(以 ...
- ant design pro (十二)advanced UI 测试
一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...
- Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...
- Ant Design Pro V5 与 IdentityServer 实现 Password 模式的登录
最近处于休息状态,想趁着休息时间,为自己做一个后台. 后端框架选用了 Abp.之前公司使用了一些自研的框架,但由于人力资源有限,后期框架的升级及维护都是比较耗时,这次干脆直接使用Abp,即省心又能快速 ...
随机推荐
- pimp技法浅析--实现轻量级的面向接口编程
pimp.hpp: #ifndef pimp_hpp #define pimp_hpp class CMyComponent{ public: CMyComponent(); ~CMyComponen ...
- Hugging Face 论文平台 Daily Papers 功能全解析
文/ Adeena, 在快速发展的研究领域,保持对最新进展的关注至关重要.为了帮助开发者和研究人员跟踪 AI 领域的前沿动态,Hugging Face 推出了 Daily Papers 页面.自发布以 ...
- Kubernetes ReplicaSet 控制器(十九)
前面我们一起学习了 Pod 的原理和一些基本使用,但是在实际使用的时候并不会直接使用 Pod,而是会使用各种控制器来满足我们的需求,Kubernetes 中运行了一系列控制器来确保集群的当前状态与期望 ...
- Kernel调试追踪技术之 Kprobe on ARM64
kprobe是什么? kprobe 是一种动态调试机制,用于debugging,动态跟踪,性能分析,动态修改内核行为等,2004年由IBM发布,是名为Dprobes工具集的底层实现机制[1][2],2 ...
- 来参与Oracle VS openGauss 在线研讨,与盖国强老师、李国良教授面对面!
11月11日下午14点,墨天轮社区邀请到两位数据库领域的巅峰人物:Oracle ACED 盖国强老师,和来自清华大学计算机与技术系的李国良教授,他们将进行一场"巅峰对话". 墨天轮 ...
- vue的计算属性computed和监视属性waatch的区别
共同的:都是用于监听数据变化的属性: 计算属性:必须有返回值return ,依赖其它属性值,其它属性值发生变化的时候就会重新计算 : 监视属性:每当数据变化的时候就会触发执行,watch有两个新值和旧 ...
- OpenFunction v0.8.0 发布:通过 Dapr Proxy 加速函数启动
相较于其他函数计算项目,OpenFunction 有很多独特的功能,其中之一便是通过 Dapr 与各种后端服务(BaaS)无缝集成.目前 OpenFunction 已经支持了 Dapr 的 pub/s ...
- C# 动态调用webservice代码
/// <summary> /// 动态调用WebService /// </summary> /// <param name="url">UR ...
- ES6语法特性
ES6语法特性 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了. 它的目标,是使得 JavaScript 语言 ...
- att&ck学习笔记1
一.环境搭建 1.1环境搭建测试 最近想要开始学习内网渗透,搜集了一些教程,准备先实验一个vulnstack靶机,熟悉一下内网渗透操作再学习基础知识. 靶场下载地址:http://vulnstack. ...