React組件通信之路由傳參(react-router-dom)
最近在學習react，現在的工作中使用的是vue，在學習的過程中對兩者進行比較，加深理解。
以下是react中的一小部分知識點，我個人覺得也是比較常用的知識點，react組件通信的其中一種方式–路由傳參（react組件通信的方式有多種，如props、事件回調、context、router、redux、緩存等等）。現在單頁面SPA應用的比較廣泛，在不刷新整個頁面進行部分頁面的跳轉，使用路由跳轉便在所難免，那麼react路由除瞭進行頁面之間的跳轉，還有很大一個作用就是進行頁面或者組件切換時傳遞參數，從而達到通信的目的。
咱們用簡單的實例對react路由跳轉傳參的方式進行說明（本文重點為路由傳參方式，路由配置以及相關屬性暫不展開）
準備工作，安裝路由依賴：
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裡面的某一部分需要路由切換顯示內容，Route為需要切換的組件，path為路由路徑，exact為精確匹配，Link為鏈接，to表示跳轉的路由路徑，與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';
//動態加載組件,加快首屏渲染
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)
重點來瞭！！！
在切換路由時，傳參方式主要有3種：path動態路徑、query、state
首先，path動態路徑法，設置path的時候在地址中拼接一個動態參數，下面的動態參數為:id
<Route exact path="/home/users/:id" component={Users}>
</Route>
在進行頁面切換或跳轉時，將所要傳遞的信息拼在地址後面，如：
<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動態參數拼接傳過來的信息
}
}
componentDidMount(){
console.log(this.props,'users props')
}
render() {
return (
<div>
<span>我是users：{this.state.id}</span>
</div>
)
}
}
export default Users
獲取：this.props.match.params.id
可以打印props，查看裡面的內容，不難發現，props中存在該信息
那麼對應的編程式跳轉為：
<button onClick={() => { this.props.history.push({ pathname: '/home/users/999' }) }}>about</button>
//同樣，用this.props.match.params.id進行取值
第二種傳參方法為query，通過參數query將信息傳遞過去
<Link to={{pathname:"/home/users",query:{ text: '666' }}}>Users</Link>
獲取：this.props.location.query.text
同樣，打印出來看看
對應的編程式跳轉為：
<button onClick={() => { this.props.history.push({ pathname: '/home/users/999', query: { text: '666' } }) }}>Users</button>
//同樣，獲取方式this.props.location.query.text
第三種傳參方法為state，通過參數state將信息傳遞過去，用法與query一致
<Link to={{pathname:"/home/users",state:{ text: '666' }}}>Users</Link>
獲取：this.props.location.state.text
同樣，打印出來看看
對應的編程式跳轉為：
<button onClick={() => { this.props.history.push({ pathname: '/home/users/999', state: { text: '666' } }) }}>Users</button>
//同樣，獲取方式this.props.location.state.text
ps：query跟state用一個重要的區別，那就是在頁面跳轉之後，重新刷新當前頁面，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
通過跳轉，獲取數據正常，query存在
重新刷新當前頁面，則query消失
頁面顯示為
同樣的過程使用state傳參方式，location中state刷新當前頁面也不會消失，推薦state方式。
總結：本文主要講述react路由跳轉傳參的3種方式，在項目中涉及到某個頁面跳轉需要將某些信息傳遞給跳轉目的頁面，不妨考慮這幾種方式。區別：動態地址方式雖然簡單，但是傳參的方式單一，隻能拼在地址，且為字符串，當傳遞的信息過長時，地址看起來比較亂，信息也會暴露出來；而對於query來說，傳參方式雖與state一致，但是有一點，跳轉之後刷新當前頁，query會消失，而state不會。
對比Vue中路由傳參方式：
Vue組件間的通信方式（多種場景，通俗易懂，建議收藏）
到此這篇關於React組件通信之路由傳參(react-router-dom)的文章就介紹到這瞭,更多相關React 路由傳參內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！