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')
}
}
点击按钮后: