react-router 编程式导航

react-router 编程式导航

还记得vue里面的路由是怎么写的吗？

在vue里面，路由需要：
引入->实例化路由对象 ->定义规则->挂载到全局->路由占坑（在页面中使用）

vue里面路由导航也有两种方式：
router-link 是配合router-view使用在页面当中的
另一种是在函数被触发的时候执行this.$router.push(路由路径)
后一种也被称为编程式导航

而在react里面也有两种
上述的导航是第一种，直接在页面中配合route使用的Link 与to 搭配，在与route里面的规则对应使用

而另一种是通过函数来触发的，

这里我们通过Home来实现跳转about：
home.js:

import React, { Component } from 'react'

export default class index extends Component {
  componentDidMount(){
    console.log(this.props)
  }
  render() {
    return (
      <div>
        this is home page
        <button onClick={this.changePath}>to About</button>
      </div>
    )
  }
  changePath = () => {
    console.log(this.props.history)
    this.props.history.push('/about')
  }
}

点击按钮后：