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)
相关推荐
长空任鸟飞_阿康3 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii3587 分钟前
快速学完React计划(第一天)
前端·react.js·前端框架
liangshanbo12157 分钟前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript
苏打水com9 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手18 分钟前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
小潘同学21 分钟前
Vue3中响应式数据深度拷贝 Avoid app logic that relies on,,,,,,,,
前端
六六Leon24 分钟前
Kuikly跨端模式接入资源管理
前端
tianchang27 分钟前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
旺仔牛仔QQ糖28 分钟前
Vue3.0 Hook 使用好用多多
前端