fix: Breadcrumb overlay deprecated warning (#38567)

* fix: incorrect warning

* Update components/breadcrumb/__tests__/Breadcrumb.test.tsx

Co-authored-by: afc163 <afc163@gmail.com>

Co-authored-by: afc163 <afc163@gmail.com>

components/breadcrumb/Breadcrumb.tsx

@@ -2,9 +2,11 @@ import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
+import type { DropdownProps } from '../dropdown';
 import Menu from '../menu';
 import { cloneElement } from '../_util/reactNode';
 import warning from '../_util/warning';
+import type { BreadcrumbItemProps } from './BreadcrumbItem';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 
@@ -50,7 +52,7 @@ function defaultItemRender(route: Route, params: any, routes: Route[], paths: st
 
 const getPath = (path: string, params: any) => {
   path = (path || '').replace(/^\//, '');
-  Object.keys(params).forEach(key => {
+  Object.keys(params).forEach((key) => {
     path = path.replace(`:${key}`, params[key]);
   });
   return path;
@@ -88,18 +90,18 @@ const Breadcrumb: BreadcrumbInterface = ({
   if (routes && routes.length > 0) {
     // generated by route
     const paths: string[] = [];
-    crumbs = routes.map(route => {
+    crumbs = routes.map((route) => {
       const path = getPath(route.path, params);
 
       if (path) {
         paths.push(path);
       }
       // generated overlay by route.children
-      let overlay;
+      let overlay: DropdownProps['overlay'];
       if (route.children && route.children.length) {
         overlay = (
           <Menu
-            items={route.children.map(child => ({
+            items={route.children.map((child) => ({
               key: child.path || child.breadcrumbName,
               label: itemRender(child, params, routes, addChildPath(paths, child.path, params)),
             }))}
@@ -107,8 +109,14 @@ const Breadcrumb: BreadcrumbInterface = ({
         );
       }
 
+      const itemProps: BreadcrumbItemProps = { separator };
+
+      if (overlay) {
+        itemProps.overlay = overlay;
+      }
+
       return (
-        <BreadcrumbItem overlay={overlay} separator={separator} key={path || route.breadcrumbName}>
+        <BreadcrumbItem {...itemProps} key={path || route.breadcrumbName}>
           {itemRender(route, params, routes, paths)}
         </BreadcrumbItem>
       );

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,6 +1,5 @@
 import DownOutlined from '@ant-design/icons/DownOutlined';
 import * as React from 'react';
-
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { DropdownProps } from '../dropdown/dropdown';
@@ -23,7 +22,7 @@ export interface BreadcrumbItemProps {
 interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
   __ANT_BREADCRUMB_ITEM: boolean;
 }
-const BreadcrumbItem: BreadcrumbItemInterface = props => {
+const BreadcrumbItem: BreadcrumbItemInterface = (props) => {
   const {
     prefixCls: customizePrefixCls,
     separator = '/',

components/breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -181,4 +181,24 @@ describe('Breadcrumb', () => {
     expect(container.querySelectorAll('.ant-breadcrumb-link')[1].textContent).toBe('0');
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('should console Error then `overlay` in props', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <Breadcrumb>
+        <Breadcrumb.Item overlay={<div>test</div>} />
+      </Breadcrumb>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
+    );
+    errSpy.mockRestore();
+  });
+  
+  it('should not console Error then `overlay` not in props', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Breadcrumb routes={[{ path: '/', breadcrumbName: 'Test' }]} />);
+    expect(errSpy).not.toHaveBeenCalled();
+    errSpy.mockRestore();
+  });
 });