🐛[BUG] Breadcrumb 组件存在警告 validateDOMNesting(...): <a> cannot appear as a descendant of <a>. at a

[leshalv]

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#6755][🐛[BUG]使用pro create xx 生成的umi4项目报 Warning: validateDOMNesting(...): cannot appear as a descendant of .][65%]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

你好，根据你提供的截图和错误信息看起来是你的 Breadcrumb 组件中出现了嵌套 <a> 标签的问题，造成了 DOM 结构存在问题。这通常是由于使用了不当或者嵌套了不应该出现的标签导致的。

可以尝试检查一下 Breadcrumb 组件的代码，将嵌套 <a> 标签的地方改为其他的标签或者使用 onClick 事件来触发相应的操作。

你也可以参考以下的解决方案：

1. 修改 Breadcrumb 组件，使用其他标签代替 a 标签，例如使用 span 标签。

   <Breadcrumb>
   <Breadcrumb.Item><span>Home</span></Breadcrumb.Item>
   <Breadcrumb.Item><span>Library</span></Breadcrumb.Item>
   <Breadcrumb.Item><span>Data</span></Breadcrumb.Item>
   </Breadcrumb>

2. 使用 onClick 事件代替 <a> 标签的 href 属性。

   
   const handleClick = (e) => {
   e.preventDefault();
   // 执行自己的操作
   }

Home Library Data

参考官方文档：

- [Breadcrumb](https://ant.design/components/breadcrumb-cn/)
- [React onClick 事件](https://reactjs.org/docs/handling-events.html)

[gitlwz]

我升级了，问题还是存在

[keer6]

"@umijs/max": "^4.0.57",
"@ant-design/pro-components": "^2.4.1",
"@ant-design/use-emotion-css": "1.0.4",
"antd": "^5.3.0",

同样升级到以上版本后，还是出现了该问题。

[amin168]

一样有这个问题

[netcore-jroger]

@chenshuai2144 复现示例：https://codesandbox.io/s/ji-chu-shi-yong-forked-0tqjgs?file=/App.tsx:6638-6838

主要出现这个问题的代码如下，但是改成 <span> 时，路由就算用的 history 模式，生成的链接依然是 hash 模式的

<ProLayout
         // ...
         // 另外说一下，这个 route 的类型 ItemType 导出的好像有问题，点不出来它的属性，只能暂时用 @ts-ignore
          itemRender={(route, params, routes, paths) => {
            //@ts-ignore
            return <Link href={route.path}>{route.breadcrumbName}</Link>
          }}
>
//...
</ProLayout>

[lshaofan]

升级到 "@ant-design/pro-components": "^2.4.1",后antd大于5.3.0还是会有这个问题，5.2.* 就没有这个问题了，怎么处理

[GuanJdoJ]

目前都用的最新版本，同样有问题

"@ant-design/pro-components": "2.4.2",
"@umijs/max": "4.0.61",
"antd": "5.3.1",

[vominhtrius]

same problem with all the latest versions of relevant packages.

[hihuangwei]

依然存在问题

[amin168]

请问这个 bug 有进展么

[leshalv]

更新最新版本，即可解决。