欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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標簽，to屬性是跳轉(zhuǎn)的路徑，exact表示精確匹配

import { Link } from 'react-router-dom';
import { Link } from 'apollo/router' // 其他項目里的用法
// 在組件中使用 <Link> 創(chuàng)建導航鏈接
// 1、標簽式跳轉(zhuǎn)（不傳參）
<Link to="/financeMangeView">待辦</Link>
// 2、標簽式跳轉(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)

// 標簽式跳轉(zhuǎn)（不傳參）
<Link replace to='/home/detail/'>信息</Link>
// 標簽式跳轉(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>標簽，原窗口跳轉(zhuǎn)

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

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

相關(guān)文章

  • react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解

    react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解

    這篇文章主要為大家介紹了react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-05-05
  • React.js中常用的ES6寫法總結(jié)（推薦）

    React.js中常用的ES6寫法總結(jié)（推薦）

    本篇文章中主要介紹了React.js中常用的ES6寫法總結(jié)（推薦），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • React如何優(yōu)雅的捕獲異常

    React如何優(yōu)雅的捕獲異常

    捕獲異常是來定位你錯誤代碼的。本文主要介紹了 React如何捕獲異常，你知道多少種方法，ErrorBoundary，ErrorBoundary-try-catch等等。本文就來詳細的介紹一下
    2021-06-06
  • React實現(xiàn)前端選區(qū)的示例代碼

    React實現(xiàn)前端選區(qū)的示例代碼

    本文主要介紹了React實現(xiàn)前端選區(qū)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2023-05-05
  • 聊一聊我對 React Context 的理解以及應(yīng)用

    聊一聊我對 React Context 的理解以及應(yīng)用

    這篇文章主要介紹了聊一聊我對 React Context 的理解以及應(yīng)用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2021-04-04
  • 減少react組件不必要的重新渲染實現(xiàn)方法

    減少react組件不必要的重新渲染實現(xiàn)方法

    這篇文章主要為大家介紹了減少react組件不必要的重新渲染實現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-01-01
  • React 如何使用時間戳計算得到開始和結(jié)束時間戳

    React 如何使用時間戳計算得到開始和結(jié)束時間戳

    這篇文章主要介紹了React 如何拿時間戳計算得到開始和結(jié)束時間戳,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • React的生命周期詳解

    React的生命周期詳解

    React是用于構(gòu)建用戶界面的JavaScript庫。本文詳細講解了React的生命周期，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-06-06
  • react?hooks?d3實現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解

    react?hooks?d3實現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解

    這篇文章主要為大家介紹了react?hooks?d3實現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-01-01
  • Ant Design組件庫的使用教程

    Ant Design組件庫的使用教程

    AntDesign ,簡稱antd是基于 Ant Design 設(shè)計體系的 React UI 組件庫,主要用于研發(fā)企業(yè)級中后臺產(chǎn)品,這篇文章主要介紹了Ant Design組件庫的使用教程,需要的朋友可以參考下
    2023-12-12

最新評論