React三種路由參數傳遞方式

主要是Link跳轉路由和注冊路由的時候，要相互配合，才能助力參數的傳遞

 

首先看一下，路由傳遞過去的參數

 

 

 

 

通過params參數

基本使用：

<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp;
​
​
<Route path="/home/message/detail/:id/:title" component={Detail}/>

 

如果Route的path屬性為 /home/message/detail/ 的話，是接受不到params參數的，為什么呢？

• 由於模糊匹配，因為我們的Detail組件的路由就是/home/message/detail，所以后面的傳輸其實並不會接收到的

• 所以我們就要在Route注冊路由的時候就把要接收的params參數寫上才行

// 接收：
const {id, title} = this.props.match.params

 

 

通過search參數

<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
​
<Route path="/home/message/detail" component={Detail}/>

 

• 聲明接收search參數(無需聲明接收)，直接正常注冊路由就可以了

 

接收

const {search} = this.props.location

 

search得到的是一個 ?key1=value1&key2 =value2 ，但是我們要得到的是 {key1:value1,key2:value2}格式，所以就要對這兩種不同的模式進行切換，這種轉換並不需要我們做，有一個 庫：querystring（一般簡稱為qs）

不同的存儲格式：

urlencoded：（key value用等號，多個key-value用&來分割，比如key=value&key=value)格式

對象格式：{key：value，key：value}

方法：

• qs.stringify(obg)： 轉換成urlencoded模式

• qs.parse(str) ：轉換成obj對象模式

 

但是：?key1=value1&key2 =value2，前面還有一個？，所以要把？分割才能用parse函數，

 import qs from 'querystring'
 
 const {search} = this.props.location
 const {id, title} = qs.parse(search.slice(1)) 

 

 

通過state傳遞

可以發現不管是search還是params都是把傳遞的數據直接暴露在地址中了，state的話主要是攜帶參數，但是不想讓這些參數讓用戶知道

 

<Link to={{pathname: '/home/message/detail/', state:{id:msgObj.id, title:msgObj.title}}}>{msgObj.title}</Link>
​
<Route path="/home/message/detail" component={Detail}/>

 

• 聲明接收state參數(無需聲明接收)，直接正常注冊路由就可以了

 

接收

// 接收search參數
const {id, title} = this.props.location.state || {}

 

 

拓展1：路由跳轉模式（push、replace）

默認是push

直接就是棧式路由，而replace直接把當前路由在棧中代替掉，而push式直接在棧頂加入

轉換成replace模式：

<Link replace={true} to={{pathname: '/home/message/detail/', state:{id:msgObj.id, title:msgObj.title}}}>{msgObj.title}</Link>

 

簡化模式：

<Link replace to={{pathname: '/home/message/detail/', state:{id:msgObj.id, title:msgObj.title}}}>{msgObj.title}</Link>

 

 

拓展2：編程式路由導航

 

 

直接通過 Link、NavLink來直接在標簽的屬性中設置 to屬性，來設置跳轉的頁面，這種就是標簽式的路由導航，但是如果想要在函數中實現路由跳轉

直接操作history對象里面的相關方法即可了

直接通過 操作history的go函數、replace函數等等，也就是點擊按鈕，觸發函數后，直接在函數中操作路由，而不是通過Link或者NavLink來操作的

 

拓展3：withRouter的使用

前言：

只有路由組件中才可以使用 this.props.history對象,其他的一般組件使用的話是會報錯的,那怎么讓一般組件也可以用上路由組件才能使用的API呢?

 

解決方案：

在react-router-dom中有一個withRouter

修改export default的形式

export default withRouter(Header)

 

把header組件暴露出去作為路由組件

 

效果：

• withRouter可以加工一些組件，讓一般組件具備路由組件所特有的API

• withRouter的返回值是一個新組件，和原組件的不同就是添加上了特有的API