[Breadcrumb] 使用Breadcrumb 报错 findDOMNode is deprecated and will be removed in the next major release.

[xu756]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Component

Breadcrumb

Semi Version

2.61.0

Current Behavior

use Breadcrumb

anywhere

...
 <Breadcrumb>
        <Breadcrumb.Item>Semi-ui</Breadcrumb.Item>
        <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
        <Breadcrumb.Item>Default</Breadcrumb.Item>
      </Breadcrumb>

...

Expected Behavior

error

Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at ReactResizeObserver (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:41187:5)
    at Base (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:41360:5)
    at Text (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:41926:12)
    at span
    at span
    at span
    at BreadcrumbItem (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:46657:5)
    at nav
    at Breadcrumb (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:46822:5)
    at div
    at Home (http://localhost:5173/src/pages/Home/index.tsx?t=1719717412613:18:35)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:3987:5)
    at Outlet (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:4357:26)
    at Suspense
    at main
    at Basic (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:71401:13)
    at Adapter (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:71390:30)
    at section
    at Layout (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:71429:5)
    at section
    at Layout (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:71429:5)
    at WebLayout (http://localhost:5173/src/layout/layout.tsx?t=1719717271055:102:21)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:3987:5)
    at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:3947:5)
    at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:5099:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:4364:15)
    at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:4916:5)
    at Routes
    at Suspense
    at App (http://localhost:5173/src/App.tsx?t=1719717412613:18:5)

Steps To Reproduce

import { Breadcrumb } from '@douyinfe/semi-ui';

import { useMount } from 'ahooks';
import { useLoaderData } from 'react-router-dom';
import './index.scss';

const Home = () => {
  const data = useLoaderData();
  useMount(() => {
    console.log(data);
  });

  return (
    <div
      style={{
        height: '1000px',
      }}
    >
      <Breadcrumb>
        <Breadcrumb.Item>Semi-ui</Breadcrumb.Item>
        <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
        <Breadcrumb.Item>Default</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
};

export default Home;

error

react-dom.development.js:86 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at ReactResizeObserver (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:41187:5)
    at Base (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:41360:5)
    at Text (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:41926:12)
    at span
    at span
    at span
    at BreadcrumbItem (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:46657:5)
    at nav
    at Breadcrumb (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:46822:5)
    at div
    at Home (http://localhost:5173/src/pages/Home/index.tsx?t=1719717668353:17:18)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:3987:5)
    at Outlet (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:4357:26)
    at Suspense
    at main
    at Basic (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:71401:13)
    at Adapter (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:71390:30)
    at section
    at Layout (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:71429:5)
    at section
    at Layout (http://localhost:5173/node_modules/.vite/deps/@douyinfe_semi-ui.js?v=24a196c6:71429:5)
    at WebLayout (http://localhost:5173/src/layout/layout.tsx?t=1719717271055:102:21)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:3987:5)
    at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:3947:5)
    at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:5099:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:4364:15)
    at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=24a196c6:4916:5)
    at Routes
    at Suspense
    at App (http://localhost:5173/src/App.tsx?t=1719717668353:18:5)

ReproducibleCode

import { Breadcrumb } from '@douyinfe/semi-ui';

import { useMount } from 'ahooks';
import { useLoaderData } from 'react-router-dom';
import './index.scss';

const Home = () => {
  const data = useLoaderData();
  useMount(() => {
    console.log(data);
  });

  return (
    <div
      style={{
        height: '1000px',
      }}
    >
      <Breadcrumb>
        <Breadcrumb.Item>Semi-ui</Breadcrumb.Item>
        <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
        <Breadcrumb.Item>Default</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
};

export default Home;

### Environment

```markdown
- OS:macos
- browser: chrome

Anything else?

none