React組件通信之路由傳參(react-router-dom)
最近在學習react,現(xiàn)在的工作中使用的是vue,在學習的過程中對兩者進行比較,加深理解。
以下是react中的一小部分知識點,我個人覺得也是比較常用的知識點,react組件通信的其中一種方式--路由傳參(react組件通信的方式有多種,如props、事件回調(diào)、context、router、redux、緩存等等)?,F(xiàn)在單頁面SPA應用的比較廣泛,在不刷新整個頁面進行部分頁面的跳轉(zhuǎn),使用路由跳轉(zhuǎn)便在所難免,那么react路由除了進行頁面之間的跳轉(zhuǎn),還有很大一個作用就是進行頁面或者組件切換時傳遞參數(shù),從而達到通信的目的。
咱們用簡單的實例對react路由跳轉(zhuǎn)傳參的方式進行說明(本文重點為路由傳參方式,路由配置以及相關屬性暫不展開)
準備工作,安裝路由依賴:
npm install -S react-router-dom
之后在頁面中引入路由:
import Home from './component/ManageSystem'; import { BrowserRouter as Router } from 'react-router-dom' function App() { return ( <Router> //路由包裹,首頁面里面的一個或多個頁面可能需要路由切換 <div id="App"> <Home /> </div> </Router> ); } export default App
ManageSystem.js里面的某一部分需要路由切換顯示內(nèi)容,Route為需要切換的組件,path為路由路徑,exact為精確匹配,Link為鏈接,to表示跳轉(zhuǎn)的路由路徑,與Route中的path對應,Redirect為重定向。
import React from 'react'; import Loadable from '../utils/loadable' import {Route,Link,withRouter,Redirect,Switch} from "react-router-dom"; import { Button } from 'element-react'; //動態(tài)加載組件,加快首屏渲染 const About = Loadable(() => import('./About.js')) const Users = Loadable(() => import('./Users.js')) class Home extends React.Component { render() { return ( <div style={{ position: 'relative' }}> <nav style={{ position: 'absolute', top: '0', left: '60%' }}> <ul> <li style={{ marginBottom: '10px' }}> <Link to={{pathname:"/home/about",query:{ text: '666' }}}>About</Link> </li> <li> <Link to={{pathname:"/home/users/999",state:{ text: '888' }}}>Users</Link> </li> </ul> </nav> <div style={{ position: 'absolute', top: '20px', right: '20px' }}> <Switch> <Route exact path="/home" component={() => { return null }}> </Route> <Route exact path="/home/about" component={About}> </Route> <Route exact path="/home/users/:id" component={Users}> </Route> <Redirect exact from="/" to='/home' /> </Switch> </div> </div> ); } } /* 高階組件中的withRouter,作用是將一個組件包裹進Route里面, 然后react-router的三個對象history、location、match就會被放進這個組件的props屬性中。 */ export default withRouter(Home)
重點來了?。。?/p>
在切換路由時,傳參方式主要有3種:path動態(tài)路徑、query、state
首先,path動態(tài)路徑法,設置path的時候在地址中拼接一個動態(tài)參數(shù),下面的動態(tài)參數(shù)為:id
<Route exact path="/home/users/:id" component={Users}> </Route>
在進行頁面切換或跳轉(zhuǎn)時,將所要傳遞的信息拼在地址后面,如:
<Link to={{pathname:"/home/users/999"}}>Users</Link>
當切換到Users時,可以通過match來獲取其傳過來的信息,Users.js如下
import React from "react"; class Users extends React.Component { constructor(props) { super(props) this.state = { id: this.props.match.params.id //此處獲取通過path動態(tài)參數(shù)拼接傳過來的信息 } } componentDidMount(){ console.log(this.props,'users props') } render() { return ( <div> <span>我是users:{this.state.id}</span> </div> ) } } export default Users
獲?。?strong>this.props.match.params.id
可以打印props,查看里面的內(nèi)容,不難發(fā)現(xiàn),props中存在該信息
那么對應的編程式跳轉(zhuǎn)為:
<button onClick={() => { this.props.history.push({ pathname: '/home/users/999' }) }}>about</button> //同樣,用this.props.match.params.id進行取值
第二種傳參方法為query,通過參數(shù)query將信息傳遞過去
<Link to={{pathname:"/home/users",query:{ text: '666' }}}>Users</Link>
獲取:this.props.location.query.text
同樣,打印出來看看
對應的編程式跳轉(zhuǎn)為:
<button onClick={() => { this.props.history.push({ pathname: '/home/users/999', query: { text: '666' } }) }}>Users</button> //同樣,獲取方式this.props.location.query.text
第三種傳參方法為state,通過參數(shù)state將信息傳遞過去,用法與query一致
<Link to={{pathname:"/home/users",state:{ text: '666' }}}>Users</Link>
獲?。?strong>this.props.location.state.text
同樣,打印出來看看
對應的編程式跳轉(zhuǎn)為:
<button onClick={() => { this.props.history.push({ pathname: '/home/users/999', state: { text: '666' } }) }}>Users</button> //同樣,獲取方式this.props.location.state.text
ps:query跟state用一個重要的區(qū)別,那就是在頁面跳轉(zhuǎn)之后,重新刷新當前頁面,query會消失,而state不會消失,即依然保存在location中。
不妨測試一下,對Users.js頁面進行修改,如果query不存在,顯示“query已消失”
import React from "react"; class Users extends React.Component { constructor(props) { super(props) this.state = { text: this.props.location.query ? this.props.location.query.text : 'query已消失' } } componentDidMount(){ console.log(this.props,'users props') } render() { return ( <div> <span>我是users:{this.state.text}</span> </div> ) } } export default Users
通過跳轉(zhuǎn),獲取數(shù)據(jù)正常,query存在
重新刷新當前頁面,則query消失
頁面顯示為
同樣的過程使用state傳參方式,location中state刷新當前頁面也不會消失,推薦state方式。
總結(jié):本文主要講述react路由跳轉(zhuǎn)傳參的3種方式,在項目中涉及到某個頁面跳轉(zhuǎn)需要將某些信息傳遞給跳轉(zhuǎn)目的頁面,不妨考慮這幾種方式。區(qū)別:動態(tài)地址方式雖然簡單,但是傳參的方式單一,只能拼在地址,且為字符串,當傳遞的信息過長時,地址看起來比較亂,信息也會暴露出來;而對于query來說,傳參方式雖與state一致,但是有一點,跳轉(zhuǎn)之后刷新當前頁,query會消失,而state不會。
對比Vue中路由傳參方式:
到此這篇關于React組件通信之路由傳參(react-router-dom)的文章就介紹到這了,更多相關React 路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue組合式API--setup中定義響應式數(shù)據(jù)的示例詳解
在Vue2.x中,編寫組件的方式是使用Options API,它的特點是在對應的屬性中編寫對應的功能模塊,這篇文章主要介紹了Vue組合式API--setup中定義響應式數(shù)據(jù)詳解,需要的朋友可以參考下2022-10-10vue+elementUI實現(xiàn)當渲染文本超出一定字數(shù)時顯示省略號
這篇文章主要介紹了vue+elementUI實現(xiàn)當渲染文本超出一定字數(shù)時顯示省略號,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue(element ui)el-table樹形表格展示以及數(shù)據(jù)對齊方式
這篇文章主要介紹了vue(element ui)el-table樹形表格展示以及數(shù)據(jù)對齊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題
這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04