共计 936 个字符，预计需要花费 3 分钟才能阅读完成。

push 和 replace

默认 push 模式，类似压栈

// 开启 replace 模式
<Link repalce to={`/home/message/dateil/Joe/18`}>详情</Link>

编程式路由导航

借助 this.props.history 对象上的 API 对操作路由跳转、前进、后退

this.props.history.push 跳转

// push 跳转+携带 params 参数
this.props.history.push('/home/message/detail/Joe/18')

// push 跳转+携带 search 参数
this.props.history.push('/home/message/detail?name=Joe&age=18')

// push 跳转+携带 state 参数
this.props.history.push('/home/message/detail', {name='Joe', age=18})

this.props.history.replace 跳转

// replace 跳转+携带 params 参数
this.props.history.replace('/home/message/detail/Joe/18')

// replace 跳转+携带 search 参数
this.props.history.replace('/home/message/detail?name=Joe&age=18')

// replace 跳转+携带 state 参数
this.props.history.replace('/home/message/detail', {name='Joe', age=18})

其他方法

this.props.history.go(n)

this.props.history.goBack()

this.props.history.goForward()

普通组件使用路由 withRouter

withRouter 可以加工普通组件，让普通组件具备路由组件所特有的 API
withRouter 的返回值是一个新组件

import { withRouter } from 'react-router-dom'

// 组件 Header...

export default withRouter(Header)