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

React組件通信之路由傳參(react-router-dom)

 更新時(shí)間:2021年10月28日 16:25:11   作者:前端菜小白leo  
本文主要介紹了React組件通信之路由傳參(react-router-dom),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

  最近在學(xué)習(xí)react,現(xiàn)在的工作中使用的是vue,在學(xué)習(xí)的過程中對兩者進(jìn)行比較,加深理解。

  以下是react中的一小部分知識點(diǎn),我個(gè)人覺得也是比較常用的知識點(diǎn),react組件通信的其中一種方式--路由傳參(react組件通信的方式有多種,如props、事件回調(diào)、context、router、redux、緩存等等)。現(xiàn)在單頁面SPA應(yīng)用的比較廣泛,在不刷新整個(gè)頁面進(jìn)行部分頁面的跳轉(zhuǎn),使用路由跳轉(zhuǎn)便在所難免,那么react路由除了進(jìn)行頁面之間的跳轉(zhuǎn),還有很大一個(gè)作用就是進(jìn)行頁面或者組件切換時(shí)傳遞參數(shù),從而達(dá)到通信的目的。

  咱們用簡單的實(shí)例對react路由跳轉(zhuǎn)傳參的方式進(jìn)行說明(本文重點(diǎn)為路由傳參方式,路由配置以及相關(guān)屬性暫不展開)

  準(zhǔn)備工作,安裝路由依賴:

npm install -S react-router-dom

  之后在頁面中引入路由:

import Home from './component/ManageSystem';
import { BrowserRouter as Router } from 'react-router-dom'
function App() {
  return (
    <Router>               //路由包裹,首頁面里面的一個(gè)或多個(gè)頁面可能需要路由切換
      <div id="App">
        <Home />
      </div>
    </Router>
  );
}
 
export default App

ManageSystem.js里面的某一部分需要路由切換顯示內(nèi)容,Route為需要切換的組件,path為路由路徑,exact為精確匹配,Link為鏈接,to表示跳轉(zhuǎn)的路由路徑,與Route中的path對應(yīng),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,作用是將一個(gè)組件包裹進(jìn)Route里面,
然后react-router的三個(gè)對象history、location、match就會被放進(jìn)這個(gè)組件的props屬性中。
*/
export default withRouter(Home)

 重點(diǎn)來了!??!

 在切換路由時(shí),傳參方式主要有3種:path動態(tài)路徑、query、state 

 首先,path動態(tài)路徑法,設(shè)置path的時(shí)候在地址中拼接一個(gè)動態(tài)參數(shù),下面的動態(tài)參數(shù)為:id

<Route exact path="/home/users/:id" component={Users}>
</Route>

在進(jìn)行頁面切換或跳轉(zhuǎn)時(shí),將所要傳遞的信息拼在地址后面,如:

<Link to={{pathname:"/home/users/999"}}>Users</Link>

當(dāng)切換到Users時(shí),可以通過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中存在該信息

 那么對應(yīng)的編程式跳轉(zhuǎn)為:

<button onClick={() => { this.props.history.push({ pathname: '/home/users/999' }) }}>about</button>
 
//同樣,用this.props.match.params.id進(jìn)行取值

第二種傳參方法為query,通過參數(shù)query將信息傳遞過去

<Link to={{pathname:"/home/users",query:{ text: '666' }}}>Users</Link>

獲?。?strong>this.props.location.query.text

同樣,打印出來看看

 對應(yīng)的編程式跳轉(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

同樣,打印出來看看

 對應(yīng)的編程式跳轉(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用一個(gè)重要的區(qū)別,那就是在頁面跳轉(zhuǎn)之后,重新刷新當(dāng)前頁面,query會消失,而state不會消失,即依然保存在location中。

不妨測試一下,對Users.js頁面進(jìn)行修改,如果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存在

 重新刷新當(dāng)前頁面,則query消失

 頁面顯示為

 同樣的過程使用state傳參方式,location中state刷新當(dāng)前頁面也不會消失,推薦state方式。

總結(jié):本文主要講述react路由跳轉(zhuǎn)傳參的3種方式,在項(xiàng)目中涉及到某個(gè)頁面跳轉(zhuǎn)需要將某些信息傳遞給跳轉(zhuǎn)目的頁面,不妨考慮這幾種方式。區(qū)別:動態(tài)地址方式雖然簡單,但是傳參的方式單一,只能拼在地址,且為字符串,當(dāng)傳遞的信息過長時(shí),地址看起來比較亂,信息也會暴露出來;而對于query來說,傳參方式雖與state一致,但是有一點(diǎn),跳轉(zhuǎn)之后刷新當(dāng)前頁,query會消失,而state不會。

對比Vue中路由傳參方式:

Vue組件間的通信方式(多種場景,通俗易懂,建議收藏)

到此這篇關(guān)于React組件通信之路由傳參(react-router-dom)的文章就介紹到這了,更多相關(guān)React 路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論