React-编程式路由导航

4次阅读
没有评论

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

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)

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计936字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码