react（47）——通过调用this.props.history的方法来实现路由的Link组件功能，使用withRoute将非路由组件变为路由组件_this.props.history.replace

1.this.props.history.push方法

1. this.props.history.push()该方法中的参数为Link组件的to属性，也可以传递state；

 this.props.history.push(`/Page2/Div1`)
 //等同于
 <Link to=`/Page2/Div1`></Link>

 this.props.history.push(`/Page2/Div1`,{ id: 1, message: "你好啊" })
 //等同于
 <Link to={{pathname:`/Page2/Div1`,state:{id: 1, message: "你好啊"}}></Link>
1
2
3
4
5
6
7

2.this.props.history.replace方法

1. this.props.history.replace()该方法中的参数为replace属性为true的Link组件的to属性，也可以传递state；

 this.props.history.replace(`/Page2/Div1`)
 //等同于
 <Link replace to=`/Page2/Div1`></Link>

 this.props.history.replace(`/Page2/Div1`,{ id: 1, message: "你好啊" })
 //等同于
 <Link replace to={{pathname:`/Page2/Div1`,state:{id: 1, message: "你好啊"}}></Link>
1
2
3
4
5
6
7

3.this.props.history.goBack方法

1. 实现浏览器的回退功能
   

4.this.props.history.goForward方法

1. 实现浏览器的前进功能
   

5.this.props.history.go方法

1. this.props.history.go()这个方法的参数为数字
   （1）为1则前进一次（可理解为运行一次goForward()方法）
   （2）为2则前进两次
   （2）为-2则回退两次（可理解为运行两次goBack()方法。

6.注意：以上的方法需要在路由组件中才可以实现，不是路由组件的话，需要经过withRoute将其包装成为一个路由组件

代码：

import React, { Component } from 'react'
import { withRouter } from 'react-router'

class div3 extends Component {
    render() {
        return (
            <div>
                一个普通组件
            </div>
        )
    }
}

export default withRouter(div3);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

经过withRoute处理后的这个普通组件，就可以拥有路由组件的props了