高阶组件包裹跳转

src/App.js

@@ -1,6 +1,6 @@
 import { BrowserRouter as Router, Route, Navigate , Routes } from 'react-router-dom';
 import { Todo, Message, PersonalCenter, Bottom } from './pages/Bottom/index'
-import { Home } from './pages/Home';
+import Home from './pages/Home';
 import './pages/Bottom/index.css'
 import { NavBar, TabBar } from 'antd-mobile'
 function App() {

src/pages/Home/index.js

@@ -1,19 +1,20 @@
 import React from 'react'
-import { Swiper, CapsuleTabs, Grid } from 'antd-mobile'
+import { Swiper, Grid } from 'antd-mobile'
 import axios from 'axios';
+import WidthUseNavigate from '../WidthUseNavigate';
 import './index.css'
 import ImgZZ from './../../assets/images/nav-1.png'
 import ImgHZ from './../../assets/images/nav-2.png'
 import ImgDTZF from './../../assets/images/nav-3.png'
 import ImgQCZ from './../../assets/images/nav-4.png'
-import { redirect, useNavigate } from 'react-router-dom';
+
 const localCatalog = [
     { "imgSrc": ImgZZ, "title": "整租" ,"path":"/todo"},
     { "imgSrc": ImgHZ, "title": "合租" ,"path":"/todo"},
     { "imgSrc": ImgDTZF, "title": "地图找房" ,"path":"/message"},
     { "imgSrc": ImgQCZ, "title": "去出租" ,"path":"/me"}
 ]
-export class Home extends React.Component {
+class HomeInner extends React.Component {
     state = {
         swipers: []
     }
@@ -48,7 +49,7 @@ export class Home extends React.Component {
                     localCatalog.map((item,index) => (
                         <Grid.Item key={index} onClick={()=>{
                             console.log("点击跳转")
-                            this.props.navigate=item.path}}>
+                            this.props.to(item.path)}}>
                             <div ><img src={item.imgSrc} /><h2>{item.title}</h2></div>
                         </Grid.Item>
                     ))
@@ -56,4 +57,8 @@ export class Home extends React.Component {
             </Grid>
         </div>
     };
-}
+}
+// 使用高阶组件包裹当前类组件
+const Home = WidthUseNavigate(HomeInner);
+// 导出包裹后的类组件
+export default Home;