react普通类组件-在react-router6中使用编程式导航

最新推荐文章于 2024-04-21 19:48:25 发布

穿越到未来calc

最新推荐文章于 2024-04-21 19:48:25 发布

阅读量535

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_52179917/article/details/129317919

版权

文章讲述了在Reactv6中，由于withRouter在新版本中被废弃，如何在类组件中改用useLocation,useNavigate和useParams这些ReactRouter的Hook来实现路由功能。示例代码展示了一个类组件FromCom如何通过高阶组件withRouter与新的Hook结合使用。

摘要由CSDN通过智能技术生成

之前在v5 中使用的时 withRouter 但是这个方法在 6中废弃

难点：在类组件中使用 hook: useLocation, useNavigate, useParams

代码：

import React, { Component } from 'react'

import { useLocation, useNavigate, useParams } from 'react-router-dom';
// import './index.css'

class FromCom extends Component {

  constructor(props) {
    super(props)
    this.state = {
      submitValue: null
    }
  }

  componentDidMount() {
    // setTimeout(()=>{
    //   this.props.navigate('/pub')
    // },2000)
    // console.log('llll',this.props)
  }


  render() {
    return (
      <div>
          
      </div>
    )
  }
}

const withRouter = FromCom => props => {
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams();

  return (
    <FromCom
      {...props}
      location={location}
      navigate={navigate}
      params={params}
    />
  );
};



export default withRouter(FromCom);