React - 一般组件 withRouter 的使用（让一般组件具备路由组件特有的API属性）

最新推荐文章于 2025-03-19 15:08:02 发布

风轻轻~

最新推荐文章于 2025-03-19 15:08:02 发布

阅读量739

点赞数

分类专栏： # React__基础文章标签： react.js

本文链接：https://blog.youkuaiyun.com/Jie_1997/article/details/126740450

版权

React__基础专栏收录该内容

38 篇文章

订阅专栏

这篇博客介绍了React中的withRouter高阶组件，它可以让普通组件获取到路由的history, location和match属性。通过withRouter包裹组件，实例中展示了如何在Header组件中实现回退、前进和指定步数跳转的功能，从而实现对路由的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React - 一般组件 withRouter 的使用（让一般组件具备路由组件特有的API属性）

一. withRouter 理解
二. withRouter 使用

一. withRouter 理解

withRouter 可以加工一般组件，让一般组件具备路由组件特有的 API 属性，会将history，location， match属性放到这个组件的props属性中。
withRouter的返回值是一个新组件。

二. withRouter 使用

import React, { Component } from "react";
// 引入 withRouter
import { withRouter } from "react-router-dom";

class Header extends Component {
  // 回退
  back = () => {
    this.props.history.goBack();
  };

  // 前进
  forward = () => {
    this.props.history.goForward();
  };

  // 向前或向后跳转制定步数
  go = (num) => {
    this.props.history.go(num);
  };
  
  render() {
    console.log(123,this.props);
    return (
      <div className="page-header">
        <h2>导航栏</h2>
        <button onClick={this.back}>回退</button>&nbsp;
        <button onClick={this.forward}>前进</button>&nbsp;
        <button onClick={() => this.go(2)}>前进2步</button>&nbsp;
        <button onClick={() => this.go(-2)}>后退2步</button>
      </div>
    );
  }
}
// withRouter 包裹 Header 组件
export default withRouter(Header);