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,即省心又能快速 ...
随机推荐
- 十,Spring Boot 的内容协商的详细剖析(附+Debug调试说明)
十,Spring Boot 的内容协商的详细剖析(附+Debug调试说明) @ 目录 十,Spring Boot 的内容协商的详细剖析(附+Debug调试说明) 1. 基本介绍 2. 准备工作 3. ...
- windbg配置问题汇总(记录)
.loadby sos.dll mscorwks.symfix c:\windows\symbols windbg配置问题汇总 1.Failed to find runtime DLL (clr.dl ...
- C++面试题整理 2
8. C++11新特性又哪些 自动类型推导auto,智能指指针(share_ptr,unique_ptr等),for循环简化,线程相关的(std::thread/std::mutex),空指针null ...
- 报名开启|和你约定在 "Google 应用出海指南针"
Google 谷歌发布的<2021 移动应用全球化指南>报告中提到,在移动互联网高度渗透的当下,全球用户迸发出来的广泛需求为中国新生代创业者带来了巨大的历史机遇.过去十年,依托于技术和人才 ...
- 全网最适合入门的面向对象编程教程:54 Python字符串与序列化-字符串格式化与format方法
全网最适合入门的面向对象编程教程:54 Python 字符串与序列化-字符串格式化与 format 方法 摘要: 在 Python 中,字符串格式化是将变量插入到字符串中的一种方式,Python 提供 ...
- 左值 <->右值
左值引用指向左值 右值引用指向右值 int a = 5; int &ref_a = a; // 左值引用指向左值,编译通过 int &ref_a = 5; // 左值引用指向了右值,会 ...
- 25. http 常见状态码
状态码的分类: 2xx:表明请求被成功接收并处理 : 3xx:表示要完成请求,需要进一步操作. 通常,这些状态代码用来重定向 :重定向就是 从 a 地址跳转到 b 地址 : 4xx:客户端错误,请求错 ...
- 18 Transformer 的动态流程
博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...
- kubernetes中pod的隔离策略
配置容器级别的安全控制 使用宿主机的网络模式 可以通过设置pod的spec的hostNetwork参数为true开启容器的"host"network模式 spec: hostNet ...
- KubeSphere 社区双周报|2024.02.29-03.14
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...