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

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"})

// 标签式跳转（不传参）
<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"})

this.props.history.goBack()

this.props.history.goForward()

this.props.history.go(num)

this.props.history.push("你的url后缀路径，不包含域名")
//比如
 this.props.history.push("/swagger/project/detail/"+projectId)

let url = document.URL + "/detail/" + projectId;
window.open(url) //此处的url是全路径