chore: Upgrade react router v6 (#32821)

* chore: upgrade react-router to v6

close #32809
close #32774

* fix test

* fix test

* fix test

* fix test

components/breadcrumb/__tests__/demo.test.js

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('breadcrumb', { skip: ['router.md', 'router-4.md'] });
+demoTest('breadcrumb', { skip: ['react-router.md'] });

components/breadcrumb/__tests__/image.test.ts

@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Breadcrumb image', () => {
-  imageDemoTest('breadcrumb', { skip: ['router-4.md'] });
+  imageDemoTest('breadcrumb', { skip: ['react-router.md'] });
 });

components/breadcrumb/__tests__/router.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Switch, Link, withRouter, MemoryRouter } from 'react-router-dom';
+import { Route, Routes, Link, useLocation, useNavigate, MemoryRouter } from 'react-router-dom';
 import { mount } from 'enzyme';
 import Breadcrumb from '../index';
 
@@ -32,12 +32,10 @@ describe('react router', () => {
   });
 
   // https://github.com/airbnb/enzyme/issues/875
-  it('react router 4', () => {
-    if (process.env.REACT === '15') {
-      return;
-    }
-    const Home = withRouter(props => {
-      const { location, history } = props;
+  it('react router 6', () => {
+    const Home = () => {
+      const location = useLocation();
+      const navigate = useNavigate();
       const pathSnippets = location.pathname.split('/').filter(i => i);
       const extraBreadcrumbItems = pathSnippets.map((_, index) => {
         const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
@@ -55,17 +53,17 @@ describe('react router', () => {
       return (
         <div className="demo">
           <div className="demo-nav">
-            <a onClick={() => history.push('/')}>Home</a>
-            <a onClick={() => history.push('/apps')}>Application List</a>
+            <a onClick={() => navigate('/')}>Home</a>
+            <a onClick={() => navigate('/apps')}>Application List</a>
           </div>
-          <Switch>
+          <Routes>
             <Route path="/apps" component={Apps} />
             <Route render={() => <span>Home Page</span>} />
-          </Switch>
+          </Routes>
           <Breadcrumb>{breadcrumbItems}</Breadcrumb>
         </div>
       );
-    });
+    };
     const wrapper = mount(
       <MemoryRouter initialEntries={['/']} initialIndex={0}>
         <Home />

components/breadcrumb/demo/router-4.md → components/breadcrumb/demo/react-router.md

@@ -3,20 +3,20 @@ order: 3
 iframe: 200
 reactRouter: react-router-dom
 title:
-  zh-CN: 其它路由
-  en-US: Other Router Integration
+  zh-CN: react-router V6
+  en-US: react-router V6
 ---
 
 ## zh-CN
 
-和 `react-router@4+`，或其他路由进行结合使用。
+与 `react-router@6+` 结合使用，生成和路由绑定的面包屑。
 
 ## en-US
 
-Used together with `react-router@4+` or other router.
+Used together with `react-router@6+`.
 
 ```jsx
-import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
+import { HashRouter, Route, Routes, Link, useLocation } from 'react-router-dom';
 import { Breadcrumb, Alert } from 'antd';
 
 const Apps = () => (
@@ -37,8 +37,8 @@ const breadcrumbNameMap = {
   '/apps/1/detail': 'Detail',
   '/apps/2/detail': 'Detail',
 };
-const Home = withRouter(props => {
-  const { location } = props;
+const Home = props => {
+  const location = useLocation();
   const pathSnippets = location.pathname.split('/').filter(i => i);
   const extraBreadcrumbItems = pathSnippets.map((_, index) => {
     const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
@@ -59,20 +59,20 @@ const Home = withRouter(props => {
         <Link to="/">Home</Link>
         <Link to="/apps">Application List</Link>
       </div>
-      <Switch>
+      <Routes>
         <Route path="/apps" component={Apps} />
         <Route render={() => <span>Home Page</span>} />
-      </Switch>
+      </Routes>
       <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
       <Breadcrumb>{breadcrumbItems}</Breadcrumb>
     </div>
   );
-});
+};
 
 ReactDOM.render(
-  <Router>
+  <HashRouter>
     <Home />
-  </Router>,
+  </HashRouter>,
   mountNode,
 );
 ```

package.json

@@ -152,7 +152,7 @@
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {
-    "@ant-design/bisheng-plugin": "^2.3.0",
+    "@ant-design/bisheng-plugin": "^3.0.0",
     "@ant-design/hitu": "^0.0.0-alpha.13",
     "@ant-design/tools": "^14.0.0-alpha.3",
     "@docsearch/css": "^3.0.0-alpha.39",
@@ -254,7 +254,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-intl": "^5.20.4",
     "react-resizable": "^3.0.1",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "^6.0.2",
     "react-sortable-hoc": "^2.0.0",
     "react-sticky": "^6.0.3",
     "react-test-renderer": "^17.0.1",