前端 前端框架 react.js javascript vue.js React 中常用的几种路由跳转方式

目录

一、push跳转

1、Link组件：

二、replace跳转

 三、goBack跳转（回退）

 四、goForward跳转（前进）

 五、 go跳转（向前或向后跳转指定步数）

一、push跳转

1、Link组件：

可以在不刷新页面的情况下进行跳转，会渲染一个a标签，to属性是跳转的路径，exact表示精确匹配

import { Link } from 'react-router-dom';

import { Link } from 'apollo/router' // 其他项目里的用法

// 在组件中使用 创建导航链接

// 1、标签式跳转（不传参）

待办

// 2、标签式跳转（params传参）

待办

信息

// 编程时跳转（不传参）

this.props.history.push("/home/detail")

// 编程时跳转（state传参）

this.props.history.push("/home/detail",{id:"01",title:"信息1"})

二、replace跳转

// 标签式跳转（不传参）

信息

// 标签式跳转（params传参）

信息

// 编程时跳转（不传参）

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)

精彩文章

 您阅读本篇文章共花了：