React 中常用的几种路由跳转方式小结
作者：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路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！