React 中常用的几种路由跳转方式小结
更新时间：2023年12月19日 16:03:30 作者：outstanding木槿
基本路由跳转是最常见的一种方式,下面介绍React 中常用的几种路由跳转方式,感兴趣的朋友一起看看吧
React 中常用的几种路由跳转方式
一、push跳转
1、Link组件：
可以在不刷新页面的情况下进行跳转，会渲染一个a标签，to属性是跳转的路径，exact表示精确匹配
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>// 编程时跳转（不传参）
this.props.history.push("/home/detail")
// 编程时跳转（state传参）
this.props.history.push("/home/detail",{id:"01",title:"信息1"})二、replace跳转
// 标签式跳转（不传参）
<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跳转（回退）
this.props.history.goBack()
四、goForward跳转（前进）
this.props.history.goForward()
五、go跳转（向前或向后跳转指定步数）
this.props.history.go(num)
补充：
React页面跳转的几种方式
方式一：history在原窗口跳转
this.props.history.push("你的url后缀路径，不包含域名")
//比如
this.props.history.push("/swagger/project/detail/"+projectId)方式二：打开新的跳转窗口
let url = document.URL + "/detail/" + projectId; window.open(url) //此处的url是全路径
方式三：使用<a>标签，原窗口跳转
<a href="你要跳转的URL，不包含域名">项目列表</a>
到此这篇关于React 中常用的几种路由跳转方式的文章就介绍到这了,更多相关React路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
使用react-activation实现keepAlive支持返回传参
本文主要介绍了使用react-activation实现keepAlive支持返回传参，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了React中的useEffect(副作用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家详细介绍了如何利用React+hook+antd实现联动模糊搜索功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
我们在后台管理系统React项目开发中会有Table表格、Form表单、List列表、Button按钮等组件，这个时候我们可以使用AntDesign来减少开发中不必要的样式问题，本文就介绍了eact项目中使用AntDesign，感兴趣的可以了解一下2022-04-04
这篇文章主要为大家介绍了React useCallback钩子的作用方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了React Hooks常用钩子及基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了比ant更丰富Modal组件功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要给大家介绍了初学React,如何规范的在react中请求数据,主要介绍了使用axios进行简单的数据获取,加入状态变量,优化交互体验,自定义hook进行数据获取和使用useReducer改造请求,本文主要适合于刚接触React的初学者以及不知道如何规范的在React中获取数据的人2023-09-09
这篇文章主要介绍了React echarts 组件的封装,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2024-06-06
最近在使用react开发项目，遇到这样一个需求实现一个带有动效的 React 弹窗组件，如果不考虑动效，很容易实现，接下来小编通过本文给大家介绍React实现动效弹窗组件的实现代码，一起看看吧2021-06-06
最新评论