日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

基于React路由跳轉的幾種方式_React

作者：小火車況且況且 ? 更新時間： 2022-09-23 編程語言

React路由跳轉的幾種方式

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

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

1. params形式

路由跳轉后，參數會顯示在地址欄

在這里插入圖片描述

跳轉的方法是使用

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

其中search鍵對應的值就是拼接在地址欄的數據

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

接收的方法。數據都是存儲在useLocation中的search獲取

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

在這里插入圖片描述

2. 使用state的形式

頁面刷新不會丟失數據，并且地址欄也看不到數據 跳轉的方法是使用

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

其中search鍵對應的值就是拼接在地址欄的數據

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

接收的方法。數據都是存儲在useLocation中的search獲取

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

在這里插入圖片描述

React路由跳轉傳參問題

使用Link傳參

1.引入Link

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

2.Llink上攜帶傳遞的參數,攜帶的參數以對象形式

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

2.1 接收參數(類組件)

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

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

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.接收參數

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

隱式傳參

3.1 state方法

頁面傳參

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

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

接收參數

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

3.2 query方法

頁面傳參

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

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

接收參數

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

原文鏈接：https://blog.csdn.net/weixin_43972992/article/details/120749861

欄目分類
最近更新