关于新版react路由怎么在class组件中使用

最新推荐文章于 2023-09-04 23:45:00 发布

清都-山水郎

最新推荐文章于 2023-09-04 23:45:00 发布

阅读量1.7k

点赞数 7

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50165657/article/details/122926627

版权

大家都知道，前几个月react-router-dom更新到了V6版本，新版本的路由更加的拥抱函数式组件，这就导致一些写习惯Class组件，不太习惯函数式组件的同学无所适从。要知道在V5版本的路由我们可以通过withRouter这个高阶组件，使得一些路由的api绑定到组件的props上，而新版的路由弃用了这一高阶组件，所以我们可以通过简单的自己封装一下：

import React, { Component } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
const WithRouter = (Heder: any) => {
  return function() {
    const history = useNavigate()
    return <Heder history={history} />
  }
}


export default WithRouter

具体思路就是前两天在逛博客的时候一个大佬用传参的方式去给class传路由方法，但他是从根组件那里传，从而让我有了自己封装高阶组件的想法。