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

outstanding木槿2023-10-26 10:19

一、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)