React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)

更新時(shí)間：2023年12月19日 16:03:30 作者：outstanding木槿

基本路由跳轉(zhuǎn)是最常見(jiàn)的一種方式,下面介紹React 中常用的幾種路由跳轉(zhuǎn)方式,感興趣的朋友一起看看吧

React 中常用的幾種路由跳轉(zhuǎn)方式

一、push跳轉(zhuǎn)

1、Link組件：

可以在不刷新頁(yè)面的情況下進(jìn)行跳轉(zhuǎn)，會(huì)渲染一個(gè)a標(biāo)簽，to屬性是跳轉(zhuǎn)的路徑，exact表示精確匹配

import { Link } from 'react-router-dom';
import { Link } from 'apollo/router' // 其他項(xiàng)目里的用法
// 在組件中使用 <Link> 創(chuàng)建導(dǎo)航鏈接
// 1、標(biāo)簽式跳轉(zhuǎn)（不傳參）
<Link to="/financeMangeView">待辦</Link>
// 2、標(biāo)簽式跳轉(zhuǎn)（params傳參）
<Link to={`/financeMangeView/detail/${item.id}/${item.title}`}>待辦</Link>
<Link to='/financeMangeView/detail/01/信息1'>信息</Link>

// 編程時(shí)跳轉(zhuǎn)（不傳參）
this.props.history.push("/home/detail")
// 編程時(shí)跳轉(zhuǎn)（state傳參）
this.props.history.push("/home/detail",{id:"01",title:"信息1"})

二、replace跳轉(zhuǎn)

// 標(biāo)簽式跳轉(zhuǎn)（不傳參）
<Link replace to='/home/detail/'>信息</Link>
// 標(biāo)簽式跳轉(zhuǎn)（params傳參）
<Link replace to='/home/detail/01/信息1'>信息</Link>
// 編程時(shí)跳轉(zhuǎn)（不傳參）
this.props.history.replace("/home/detail")
// 編程時(shí)跳轉(zhuǎn)（state傳參）
this.props.history.replace("/home/detail",{id:"01",title:"信息1"})

三、goBack跳轉(zhuǎn)（回退）

this.props.history.goBack()

四、goForward跳轉(zhuǎn)（前進(jìn)）

this.props.history.goForward()

五、go跳轉(zhuǎn)（向前或向后跳轉(zhuǎn)指定步數(shù)）

this.props.history.go(num)

補(bǔ)充：

React頁(yè)面跳轉(zhuǎn)的幾種方式

方式一：history在原窗口跳轉(zhuǎn)

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

方式二：打開(kāi)新的跳轉(zhuǎn)窗口

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

方式三：使用<a>標(biāo)簽，原窗口跳轉(zhuǎn)

<a href="你要跳轉(zhuǎn)的URL，不包含域名">項(xiàng)目列表</a>

到此這篇關(guān)于React 中常用的幾種路由跳轉(zhuǎn)方式的文章就介紹到這了,更多相關(guān)React路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解
這篇文章主要為大家介紹了react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
React.js中常用的ES6寫(xiě)法總結(jié)（推薦）
本篇文章中主要介紹了React.js中常用的ES6寫(xiě)法總結(jié)（推薦），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
React如何優(yōu)雅的捕獲異常
捕獲異常是來(lái)定位你錯(cuò)誤代碼的。本文主要介紹了 React如何捕獲異常，你知道多少種方法，ErrorBoundary，ErrorBoundary-try-catch等等。本文就來(lái)詳細(xì)的介紹一下
2021-06-06
React實(shí)現(xiàn)前端選區(qū)的示例代碼
本文主要介紹了React實(shí)現(xiàn)前端選區(qū)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
聊一聊我對(duì) React Context 的理解以及應(yīng)用
這篇文章主要介紹了聊一聊我對(duì) React Context 的理解以及應(yīng)用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
減少react組件不必要的重新渲染實(shí)現(xiàn)方法
這篇文章主要為大家介紹了減少react組件不必要的重新渲染實(shí)現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
React 如何使用時(shí)間戳計(jì)算得到開(kāi)始和結(jié)束時(shí)間戳
這篇文章主要介紹了React 如何拿時(shí)間戳計(jì)算得到開(kāi)始和結(jié)束時(shí)間戳,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-09-09
React的生命周期詳解
React是用于構(gòu)建用戶(hù)界面的JavaScript庫(kù)。本文詳細(xì)講解了React的生命周期，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解
這篇文章主要為大家介紹了react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
Ant Design組件庫(kù)的使用教程
AntDesign ,簡(jiǎn)稱(chēng)antd是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫(kù),主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品,這篇文章主要介紹了Ant Design組件庫(kù)的使用教程,需要的朋友可以參考下
2023-12-12