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

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

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

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

一、push跳轉(zhuǎn)

1、Link組件：

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

import { Link } from 'react-router-dom';
import { Link } from 'apollo/router' // 其他項目里的用法
// 在組件中使用 <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>

// 編程時跳轉(zhuǎn)（不傳參）
this.props.history.push("/home/detail")
// 編程時跳轉(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>
// 編程時跳轉(zhuǎn)（不傳參）
this.props.history.replace("/home/detail")
// 編程時跳轉(zhuǎn)（state傳參）
this.props.history.replace("/home/detail",{id:"01",title:"信息1"})

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

this.props.history.goBack()

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

this.props.history.goForward()

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

this.props.history.go(num)

補充：

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

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

基于React Context實現(xiàn)一個簡單的狀態(tài)管理的示例代碼
本文主要介紹了基于React Context實現(xiàn)一個簡單的狀態(tài)管理的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
React實現(xiàn)音頻文件上傳與試聽
本文主要介紹了React實現(xiàn)音頻文件上傳與試聽,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-09-09
在React聊天應(yīng)用中實現(xiàn)圖片上傳功能
在現(xiàn)代聊天應(yīng)用中,除了文字和表情,圖片分享也是一個重要的功能,本文將詳細(xì)介紹如何在基于 React 的聊天應(yīng)用中實現(xiàn)圖片上傳和預(yù)覽功能,感興趣的小伙伴跟著小編一起來看看吧
2025-05-05
詳解React 在服務(wù)端渲染的實現(xiàn)
這篇文章主要介紹了詳解React 在服務(wù)端渲染的實現(xiàn),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
通過實例學(xué)習(xí)React中事件節(jié)流防抖
這篇文章主要介紹了通過實例學(xué)習(xí)React中事件節(jié)流防抖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下
2019-06-06
react中將html字符串渲染到頁面的實現(xiàn)方式
這篇文章主要介紹了react中將html字符串渲染到頁面的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
React中useRef與useState的使用與區(qū)別
本文介紹了React中兩個常用的鉤子useRef和useState,包含比較它們的功能并提供示例來說明它們的用法,具有一定的參考價值,感興趣的可以了解一下
2024-11-11
在React中實現(xiàn)分塊導(dǎo)出大量數(shù)據(jù)表格并壓縮成圖片的解決方案
在現(xiàn)代Web開發(fā)中,處理和展示大量數(shù)據(jù)是一個常見的挑戰(zhàn),特別是在使用React框架時,我們經(jīng)常需要將這些數(shù)據(jù)以表格的形式展示,并提供導(dǎo)出功能,本文將介紹如何在React中實現(xiàn)一個高效、分塊導(dǎo)出大量數(shù)據(jù)表格,并將其壓縮為圖片的解決方案,需要的朋友可以參考下
2024-12-12
React組件的三種寫法總結(jié)
本文主要總結(jié)了React組件的三種寫法以及最佳實踐，具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
React如何解決樣式污染問題
這篇文章主要介紹了React如何解決樣式污染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11