基于React路由跳轉的幾種方式
更新時間：2022年07月29日 08:57:29 作者：小火車況且況且
這篇文章主要介紹了React路由跳轉的幾種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
React路由跳轉的幾種方式
注意： 這里使用的react-router-dom是版本5以上，路由形式是history模式
react-router-dom文檔，其中依賴包history的github地址
1. params形式
路由跳轉后，參數(shù)會顯示在地址欄
跳轉的方法是使用
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()
// 頁面跳轉方法
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()
// 頁面跳轉方法
console.log(location, 'props')
return 123
}
2. 使用state的形式
頁面刷新不會丟失數(shù)據(jù)，并且地址欄也看不到數(shù)據(jù) 跳轉的方法是使用
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()
// 頁面跳轉方法
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()
// 頁面跳轉方法
console.log(location, 'props')
return 123
}
React路由跳轉傳參問題
使用Link傳參
1.引入Link
import { Link } from “react-router-dom”2.Llink上攜帶傳遞的參數(shù),攜帶的參數(shù)以對象形式
<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 接收參數(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', //要跳轉到的路徑
? ? 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', //要跳轉到的路徑
? ? query: { ?
? ? ? id: 456
? ? }
? })}}>去詳情頁</button>接收參數(shù)
<Route exact path="/detail" component={Detail}></Route>
//頁面接收參數(shù)
componentDidMount(){
? ? console.log(this.props.history.location.query);
}以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
React 中的事件，是對原生事件的封裝，叫做合成事件。這篇文章主要通過幾個簡單的示例為大家詳細介紹一下React中的合成事件，感興趣的可以了解一下2023-02-02
React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題
這篇文章主要介紹了React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React配置Redux并結合本地存儲設置token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
相信很多小伙伴們都一直在疑惑，setState 到底是同步還是異步。本文就詳細的介紹一下React中setState同步或異步問題，感興趣的可以了解一下2021-11-11
這篇文章主要為大家介紹了React?Hooks實現(xiàn)的中文輸入組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
React函數(shù)組件通過接受props實現(xiàn)組件間的數(shù)據(jù)傳遞,通過組件標簽的屬性向子組件傳遞數(shù)據(jù),并在子組件中通過參數(shù)接收,還可以使用ES6的解構賦值,函數(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樣式覆蓋問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
在現(xiàn)代Web開發(fā)中,前后端分離的架構已經成為一種趨勢,React,作為一種流行的前端庫,常常與后端API進行交互,以實現(xiàn)動態(tài)數(shù)據(jù)更新和用戶體驗優(yōu)化,本文將深入探討如何在React應用中與后端API進行交互,需要的朋友可以參考下2025-02-02