2023react-router怎么实现前进后退

 所属分类:web前端开发

 浏览:122次-  评论: 0次-  更新时间:2022-12-29
描述:更多教程资料进入php教程获得。 react-router实现前进后退的方法:1、通过“goback(){this.props.history.goBack()}”实现路由前进;2、通...
更多教程资料进入php教程获得。

react-router实现前进后退的方法:1、通过“goback(){this.props.history.goBack()}”实现路由前进;2、通过“go(){this.props.history.go(-1) }”实现路由回退。

本教程操作环境:Windows10系统、react18版、Dell G3电脑。

react-router怎么实现前进后退?

React-路由跳转方式与路由前进回退

1、标签跳转

//1.引入依赖
import { Link  } from 'react-router-dom'
//2.在需要的地方加上这段,Link标签是a标签
<Link to={{ pathname: /*你的路由*/ }} replace> </Link>
登录后复制

2、事件跳转

//1.引入依赖
import { withRouter } from 'react-router-dom';
//2.比如使用点击事件
fun(){
    this.props.history.push('/*你的路由*/')
  }
export default withRouter (App);
登录后复制

路由前进goBac()

goback(){
      this.props.history.goBack()  
  }
登录后复制

路由回退push()

go(){
      this.props.history.go(-1) 
  }
登录后复制

推荐学习:《react视频教程》

以上就是react-router怎么实现前进后退的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: react-router,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!