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

一. withRouter 理解

1. withRouter 可以加工一般组件，让一般组件具备路由组件特有的 API 属性，会将history，location， match属性放到这个组件的props属性中。
2. 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);