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)
相关推荐
山河木马1 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502192 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平6 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手8 分钟前
大保剑:Promise的有趣体验
javascript
李大玄8 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵8 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾14 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove21 分钟前
常见 npm 报错问题
前端·npm
sunbyte21 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子22 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试