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

基于React路由跳轉(zhuǎn)的幾種方式

 更新時(shí)間：2022年07月29日 08:57:29   作者：小火車況且況且  
這篇文章主要介紹了React路由跳轉(zhuǎn)的幾種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

注意： 這里使用的react-router-dom是版本5以上，路由形式是history模式

react-router-dom文檔，其中依賴包history的github地址

1. params形式

路由跳轉(zhuǎn)后，參數(shù)會(huì)顯示在地址欄

在這里插入圖片描述

跳轉(zhuǎn)的方法是使用

history.push({pathname: '/personal', search: 'test=22222'})

其中search鍵對(duì)應(yīng)的值就是拼接在地址欄的數(shù)據(jù)

import React from 'react'
import { useHistory } from 'react-router-dom'
export default ()=> {
	const history = useHistory()
	// 頁面跳轉(zhuǎn)方法
	history.push({pathname: '/personal', search: 'test=22222'})
	return 123
}

接收的方法。數(shù)據(jù)都是存儲(chǔ)在useLocation中的search獲取

import React from 'react'
import { useLocation } from 'react-router-dom'
export default ()=> {
	const location = useLocation()
	// 頁面跳轉(zhuǎn)方法
	console.log(location, 'props')
	return 123
}

在這里插入圖片描述

2. 使用state的形式

頁面刷新不會(huì)丟失數(shù)據(jù)，并且地址欄也看不到數(shù)據(jù) 跳轉(zhuǎn)的方法是使用

history.push({pathname: '/personal', state: {test: 'dashboard'}})

其中search鍵對(duì)應(yīng)的值就是拼接在地址欄的數(shù)據(jù)

import React from 'react'
import { useHistory } from 'react-router-dom'
export default ()=> {
	const history = useHistory()
	// 頁面跳轉(zhuǎn)方法
	history.push({pathname: '/personal', state: { test: 'dashboard' }})
	return 123
}

接收的方法。數(shù)據(jù)都是存儲(chǔ)在useLocation中的search獲取

import React from 'react'
import { useLocation } from 'react-router-dom'
export default ()=> {
	const location = useLocation()
	// 頁面跳轉(zhuǎn)方法
	console.log(location, 'props')
	return 123
}

在這里插入圖片描述

React路由跳轉(zhuǎn)傳參問題

使用Link傳參

1.引入Link

import { Link } from “react-router-dom”

2.Llink上攜帶傳遞的參數(shù),攜帶的參數(shù)以對(duì)象形式

<Link to={
?? ??? ??? ?{ pathname: "/XXX", //xxx為跳轉(zhuǎn)到的路徑
?? ??? ??? ? ?state: { title: this.state.exam.title, actionCode: this.state.exam.actionCode }?
?? ??? ??? ?}
?? ??? ? ?} >切換考試科目 <i className="iconfont icon-jiantou"></i></Link>

2.1 接收參數(shù)(類組件)

componentDidMount() {
? ? ? ? console.log(this.props.location.state.XXX); ? //xxx指state對(duì)象中的鍵名 ? ?
? ? }

2.2接收參數(shù)(函數(shù)式組件)

function Fast(props) {
? ? ?...
? ? useEffect(() => {
? ? ? ? console.log(props.location.state.XXX);//xxx指state對(duì)象中的鍵名
? ? })
}

url傳參

1.url帶參傳參

<button onClick={()=>{this.props.history.push('/detail/88')}}>跳往詳情頁</button>`

2.接收參數(shù)

// ?react-router-dom是通過“/:”去匹配url傳遞的參數(shù) ,即id獲取到上面的url傳過來的88
<Route exact path="/detail/:id" component={Detail}></Route>
//頁面接收參數(shù)
componentDidMount(){
? console.log(this.props.match.params);
}

隱式傳參

3.1 state方法

頁面?zhèn)鲄?/p>

state方法傳參:參數(shù)地址欄不顯示，刷新地址欄，參數(shù)不丟失

<button onClick={()=>{this.props.history.push({
? ? pathname: '/detail', //要跳轉(zhuǎn)到的路徑
? ? state: { ?//參數(shù)地址欄不顯示，刷新地址欄，參數(shù)不丟失
? ? ? id: 456
? ? }
? })}}>去詳情頁</button>

接收參數(shù)

<Route exact path="/detail" component={Detail}></Route>
//頁面接收參數(shù)
componentDidMount(){
? ? console.log(this.props.history.location.state);
}

3.2 query方法

頁面?zhèn)鲄?/p>

query方法傳參:參數(shù)地址欄不顯示，刷新地址欄，參數(shù)丟失

<button onClick={()=>{this.props.history.push({
? ? pathname: '/detail', //要跳轉(zhuǎn)到的路徑
? ? query: { ?
? ? ? id: 456
? ? }
? })}}>去詳情頁</button>

接收參數(shù)

<Route exact path="/detail" component={Detail}></Route>
//頁面接收參數(shù)
componentDidMount(){
? ? console.log(this.props.history.location.query);
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • React?Native性能優(yōu)化指南及問題小結(jié)

    React?Native性能優(yōu)化指南及問題小結(jié)

    本文將介紹在React?Native開發(fā)中常見的性能優(yōu)化問題和解決方案,包括ScrollView內(nèi)無法滑動(dòng)、熱更新導(dǎo)致的文件引用問題、高度獲取、強(qiáng)制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧
    2024-01-01
  • React Hook 監(jiān)聽localStorage更新問題

    React Hook 監(jiān)聽localStorage更新問題

    這篇文章主要介紹了React Hook 監(jiān)聽localStorage更新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • axios請(qǐng)求響應(yīng)數(shù)據(jù)加解密封裝實(shí)現(xiàn)詳解

    axios請(qǐng)求響應(yīng)數(shù)據(jù)加解密封裝實(shí)現(xiàn)詳解

    這篇文章主要為大家介紹了axios請(qǐng)求響應(yīng)數(shù)據(jù)加解密封裝實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03
  • React超詳細(xì)分析useState與useReducer源碼

    React超詳細(xì)分析useState與useReducer源碼

    我正在處理的組件是表單的時(shí)間輸入。表單相對(duì)復(fù)雜，并且是動(dòng)態(tài)生成的，根據(jù)嵌套在其他數(shù)據(jù)中的數(shù)據(jù)顯示不同的字段。我正在用useReducer管理表單的狀態(tài)，到目前為止效果很好
    2022-11-11
  • React組件useReducer的講解與使用

    React組件useReducer的講解與使用

    在React函數(shù)式組件中，我們可以通過useState()來創(chuàng)建state，這種state創(chuàng)建方式會(huì)給我們返回兩個(gè)東西state和setState()。
    2023-04-04
  • react中使用redux-persist做持久化儲(chǔ)存的過程記錄

    react中使用redux-persist做持久化儲(chǔ)存的過程記錄

    這篇文章主要介紹了react中使用redux-persist做持久化儲(chǔ)存的相關(guān)資料,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-01-01
  • 聊聊ant?design?charts?獲取后端接口數(shù)據(jù)展示問題

    聊聊ant?design?charts?獲取后端接口數(shù)據(jù)展示問題

    今天在做項(xiàng)目的時(shí)候遇到幾個(gè)讓我很頭疼的問題，一個(gè)是通過后端接口成功訪問并又返回?cái)?shù)據(jù)，但拿不到數(shù)據(jù)值。其二是直接修改state中的data，console中數(shù)組發(fā)生變化但任然數(shù)據(jù)未顯示，這篇文章主要介紹了ant?design?charts?獲取后端接口數(shù)據(jù)展示,需要的朋友可以參考下
    2022-05-05
  • React Refs轉(zhuǎn)發(fā)實(shí)現(xiàn)流程詳解

    React Refs轉(zhuǎn)發(fā)實(shí)現(xiàn)流程詳解

    Refs是一個(gè) 獲取 DOM節(jié)點(diǎn)或React元素實(shí)例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點(diǎn)或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關(guān)于React中refs的一些常見用法,需要的朋友可以參考下
    2022-12-12
  • React狀態(tài)提升案例介紹

    React狀態(tài)提升案例介紹

    這篇文章主要介紹了React狀態(tài)提升案例，所謂 狀態(tài)提升 就是將各個(gè)子組件的 公共state 提升到它們的父組件進(jìn)行統(tǒng)一存儲(chǔ)、處理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-04-04
  • React Fiber與調(diào)和深入分析

    React Fiber與調(diào)和深入分析

    Fiber可以理解為一個(gè)執(zhí)行單元，每次執(zhí)行完一個(gè)執(zhí)行單元，React Fiber就會(huì)檢查還剩多少時(shí)間，如果沒有時(shí)間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React Fiber架構(gòu)原理剖析,需要的朋友可以參考下
    2022-11-11

最新評(píng)論