主页

pushreplace

默认 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)

React

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0

目录

来自 《React-编程式路由导航》
评论

Joe

博主很懒,啥都没有
175 文章数
14 评论量
3 分类数
178 页面数
已在风雨中度过 1年61天10小时43分