[JavaScript知识库]react-router在Class组件中用hook（useNavigateAPI）

高阶组件包装使得hook在class组件中使用

import { useNavigate } from 'react-router-dom'
// 高阶组件包装
function widthHook(WrapCompontent) {
  // 设置别名
  WrapCompontent.displayName = `WithHook${getDisplayName(WrapCompontent)}`
  return function QiLincompont() {
    const navigate = useNavigate()
    return <WrapCompontent to={navigate}></WrapCompontent>
  }
}

// 设置别名
function getDisplayName(WrapCompontent) {
  return WrapCompontent.displayname || WrapCompontent.name || 'Component'
}

export default widthHook

此时高阶组件函数已经写好了，只需要对自己写的组件进行包装即可

import React from 'react'
import withHook from 'withHook'

class IndexSwiper extends React.PureComponent {
    toPath = (path) => {
        this.props.to(path)
    }
    render() {
        return <button onClick={ this.toPath('/news') }>路由跳转</button>
    }
}

const QilinCompont= withHook(IndexSwiper )

export default QilinCompont

?改改路径可以直接使用

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖