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

更新時間：2022年07月29日 08:57:29 作者：小火車況且況且

這篇文章主要介紹了React路由跳轉(zhuǎn)的幾種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

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

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

1. params形式

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

在這里插入圖片描述

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

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

其中search鍵對應的值就是拼接在地址欄的數(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ù)都是存儲在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的形式

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

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

其中search鍵對應的值就是拼接在地址欄的數(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ù)都是存儲在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ù)以對象形式

<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對象中的鍵名 ? ?
? ? }

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

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

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);
}

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

您可能感興趣的文章:

React中的合成事件是什么原理
React 中的事件，是對原生事件的封裝，叫做合成事件。這篇文章主要通過幾個簡單的示例為大家詳細介紹一下React中的合成事件，感興趣的可以了解一下
2023-02-02
React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題
這篇文章主要介紹了React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
React配置Redux并結(jié)合本地存儲設置token方式
這篇文章主要介紹了React配置Redux并結(jié)合本地存儲設置token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
關于React中setState同步或異步問題的理解
相信很多小伙伴們都一直在疑惑，setState 到底是同步還是異步。本文就詳細的介紹一下React中setState同步或異步問題，感興趣的可以了解一下
2021-11-11
React?Hooks?實現(xiàn)的中文輸入組件
這篇文章主要為大家介紹了React?Hooks實現(xiàn)的中文輸入組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
React函數(shù)組件傳參的實現(xiàn)
React函數(shù)組件通過接受props實現(xiàn)組件間的數(shù)據(jù)傳遞,通過組件標簽的屬性向子組件傳遞數(shù)據(jù),并在子組件中通過參數(shù)接收,還可以使用ES6的解構(gòu)賦值,函數(shù)也能作為props傳遞,以實現(xiàn)父子組件間的交互和通信,下面就來具體了解一下
2024-09-09
React函數(shù)式組件Hook中的useEffect函數(shù)的詳細解析
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個函數(shù)的組合
2022-10-10
IntersectionObserver實現(xiàn)加載更多組件demo
這篇文章主要為大家介紹了IntersectionObserver實現(xiàn)加載更多組件demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
react ant design樣式覆蓋問題
這篇文章主要介紹了react ant design樣式覆蓋問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
在React中與后端API進行交互的操作步驟
在現(xiàn)代Web開發(fā)中,前后端分離的架構(gòu)已經(jīng)成為一種趨勢,React,作為一種流行的前端庫,常常與后端API進行交互,以實現(xiàn)動態(tài)數(shù)據(jù)更新和用戶體驗優(yōu)化,本文將深入探討如何在React應用中與后端API進行交互,需要的朋友可以參考下
2025-02-02