学习React Router之在类组件中使用useNavigate

分析

1. 如果想自定义实现路由跳转，比如点击按钮跳转到Home页面，而不是通过Link或者Navigate组件来实现

2. 如果是一个函数式组件，那么可以直接调用react-router-dom中useNavigate的Hook；如果是一个类组件呢，那就不能直接使用useNavigate，但如果我非要使用呢
3. 思路： 类组件中首先要有useNavigate <= 那就将useNavigate传入类组件 <= 那就封装一个React高阶组件(HOC) <= 那就开始封装

解决

// src/hoc/index.js

import { useNavigate } from 'react-router-dom'

function withRouter(WrapCompontent) {
    return function (props) {
        const navigate = useNavigate()
        return <WrapCompontent {...props} router={{ navigate }} />
    }
}

export default withRouter

使用

Home使用自定义按钮跳转

import React, { PureComponent } from 'react'
import { Link, Navigate, Route, Routes } from 'react-router-dom'
import About from './pages/About'
import Profile from './pages/Profile'
import Home from './pages/Home'
import withRouter from './hoc'
export class App extends PureComponent {

  render() {
    const { navigate } = this.props.router
    return (
      <div>App

        <hr />
        <Link to='/about'>关于</Link>
        <Link to='/profile'>个人中心</Link>
        <button onClick={() => navigate('/home')}>跳转Home</button>
        <hr />
        <Routes>
          <Route path='/' element={<Navigate to='/about' />}></Route>
          <Route path='/about' element={<About />}></Route>
          <Route path='/profile' element={<Profile />}></Route>
          <Route path='/home' element={<Home />}></Route>
        </Routes>
      </div>

    )
  }
}

ok,解决，今日学习笔记完成！