React 中常用的几种路由跳转方式

目录

一、push跳转

1、Link组件:

二、replace跳转

三、goBack跳转(回退)

四、goForward跳转(前进)

[五、 go跳转(向前或向后跳转指定步数)](#五、 go跳转(向前或向后跳转指定步数))


一、push跳转

1、Link组件:

可以在不刷新页面的情况下进行跳转,会渲染一个a标签,to属性是跳转的路径,exact表示精确匹配

javascript 复制代码
import { Link } from 'react-router-dom';
import { Link } from 'apollo/router' // 其他项目里的用法

// 在组件中使用 <Link> 创建导航链接
// 1、标签式跳转(不传参)
<Link to="/financeMangeView">待办</Link>



// 2、标签式跳转(params传参)
<Link to={`/financeMangeView/detail/${item.id}/${item.title}`}>待办</Link>
<Link to='/financeMangeView/detail/01/信息1'>信息</Link>
javascript 复制代码
// 编程时跳转(不传参)
this.props.history.push("/home/detail")


// 编程时跳转(state传参)
this.props.history.push("/home/detail",{id:"01",title:"信息1"})

二、replace跳转

javascript 复制代码
// 标签式跳转(不传参)
<Link replace to='/home/detail/'>信息</Link>


// 标签式跳转(params传参)
<Link replace to='/home/detail/01/信息1'>信息</Link>


// 编程时跳转(不传参)
this.props.history.replace("/home/detail")


// 编程时跳转(state传参)
this.props.history.replace("/home/detail",{id:"01",title:"信息1"})

三、goBack跳转(回退)

javascript 复制代码
this.props.history.goBack()

四、goForward跳转(前进)

javascript 复制代码
this.props.history.goForward()

五、 go跳转(向前或向后跳转指定步数)

javascript 复制代码
this.props.history.go(num)
相关推荐
冰暮流星27 分钟前
css新增盒子属性——尺寸调节
前端·css
程序员爱钓鱼28 分钟前
Python编程实战 - 函数与模块化编程 - 函数的定义与调用
前端·后端·python
欧阳码农28 分钟前
使用AI生成的页面总是被一眼认出来怎么办?1分钟给你解决
前端·后端
IT_陈寒35 分钟前
7个鲜为人知的JavaScript性能优化技巧,让你的应用提速50%!
前端·人工智能·后端
艾小码1 小时前
前端别再乱存数据了!这3种存储方案让你的应用快如闪电
前端·javascript
黄毛火烧雪下1 小时前
HTML 的底层原理
前端·html
球球和皮皮1 小时前
Babylon.js学习之路《添加自定义摇杆控制相机》
javascript·3d·前端框架·babylon.js
Moment1 小时前
面经分享——字节前端一面
前端·javascript·面试
十步杀一人_千里不留行3 小时前
Google 登录集成教程(Web + Expo 移动端)
前端
gAlAxy...6 小时前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox