前情


公司经常需要做一些后台管理页面,我们选择了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. SpringMVC —— 日期类型参数传递

    日期类型参数传递    相关注解    类型转换器   

  2. Filter——过滤器

    Filter       Filter 快速入门    Filter 执行流程           1.放行前,对 request 数据进行处理     2.放行后,对 response 数据进行处理 ...

  3. 对 LLM 工具使用进行统一

    我们为 LLM 确立了一个跨模型的 统一工具调用 API.有了它,你就可以在不同的模型上使用相同的代码,在 Mistral.Cohere.NousResearch 或 Llama 等模型间自由切换,而 ...

  4. [OI] 欢夏!邪龙?马拉车!

    标题来自原神 算法概述 Manacher 算法 用途:寻找回文串,最板子的情况下用于字符串的回文子串计数 给定一个字符串 \(S\),求出它全部的回文子串 容易想到一种暴力的 \(n^{2}\) 做法 ...

  5. 暑假集训SCP提高模拟10

    我(看着百度百科):我已经知道这场谁组的题了 CTH: 谁 我:你想想,能在模拟赛里塞四道数学题还玩邦的,还能有谁 CTH: 我不知道 我:我不知道 CTH: 我知道了 我:我知道了 我:我是 Bob ...

  6. USB2.0设备的休眠挂起及远程唤醒

    USB可见设备状态,分为连接(Attached),上电(Powered),默认(Default),地址(Address),配置(Configured)和挂起(Suspended)6个状态.所谓可见,即 ...

  7. 王树森Attention与Self-Attention学习笔记

    目录 Seq2Seq + Attention Attention的原理 方法一(Used in the original paper) 方法二(more popular,the same to Tra ...

  8. Tarjan缩点题单 刷题题解

    Tarjan缩点可以将一个图的每个强连通分量缩成一个点,然后构建新图,该图就会变成一个有向无环图.变成有向无环图之后就能结合最短路,拓扑......解决相应题目 洛谷题单分享: https://www ...

  9. Office365常用的命令(持续更新中)

    Office365常用的命令(持续更新中) 持续更新中............. Enable-ExchangeCertificate -Thumbprint B9C93420E7BEE46C1CD2 ...

  10. 驻扎初篇(markdown)

    markdown的初级使用语法 本片作为开始使用博客的第一篇笔记 只为了方便为日后的编辑博客做基础的语言记录 以下为markdown的语法 ##标题 # 标题一 ## 标题二 ### 标题三 #### ...