前言：為什么要用react侧蘸？-.-
react版本：16.12.0
react-dom版本：16.12.0
react-router-dom：5.1.2
為什么我要提我當(dāng)前的版本球拦？用過react的人應(yīng)該深有體會轨功，版本切記一定要匹配丰辣，我這里提到的方式并不一定適用其他版本乍恐，目前我下載的是最新的react及路由
Link標(biāo)簽傳參
- {}是jsx的語法默蚌，我們要傳的是對象，因此這個(gè){}里面我們還需要寫一個(gè)對象形式的
- vue里面指向地址的屬性叫path漱办，看到網(wǎng)上很多文章这刷，react路由傳參指向的屬性也叫path，但是：目前react-router-dom：5.1.2指向地址的屬性叫做pathname
第一種 pathname + search
- 這種形式的傳參娩井，會把參數(shù)拼接在hash路由的最后面暇屋，例如：http://localhost:3000/#/setting?search
- 優(yōu)點(diǎn)：刷新也在........
- 缺點(diǎn)：只能傳字符串，顯式傳參洞辣，不能傳過大的數(shù)據(jù)咐刨，傳遞數(shù)據(jù)過多會讓地址變的很丑
A頁面
<Link to={{pathname: '/setting', search:'id=1'}}>jump --- search</Link>
// 取參
B頁面
this.props.history.location.search
第二種 pathname + 任意屬性
- 這種形式的傳參式隱式的，刷新頁面就沒有了
- 刷新之后會發(fā)現(xiàn)location下會多出一個(gè)state: undefined
A頁面
<Link to={{pathname: '/setting', abc:{id:1}}}>jump --- query</Link>
// 取參
B頁面
this.props.history.location.abc.id
第三種 pathname + state
- 這種形式的傳參式隱式的扬霜，刷新頁面就沒有了
- 和任意屬性一致定鸟，但是官方應(yīng)該指定的是這個(gè)，因?yàn)樗⑿潞髄ocation中會存在state: undefined著瓶，任意屬性則不會
A頁面
<Link to={{pathname: '/setting', state:{id:1}}}>jump --- state</Link>
// 取參
B頁面
this.props.history.location.state.id
第四種(錯(cuò)誤示范) pathname + 拼接
- 我想到這種方式联予，感覺會和search一樣，但是實(shí)際上材原，跳轉(zhuǎn)過去頁面并未匹配到沸久，刷新之后才會出現(xiàn)，因此search的傳參只能按照上述的第一種pathname + search的方式余蟹，有找出問題所在的朋友請不吝賜教
A頁面
let params = 'a=1&b=2';
<Link to={{pathname: `/setting?${params }`}}>jump --- 拼接</Link>
// 取參
B頁面
this.props.history.location.search
第五種 pathname + params
- 配合動態(tài)路由傳參
- 優(yōu)缺點(diǎn)同第一種pathname + search的方式
// 動態(tài)路由后面加?表示可選卷胯，不加表示必選
<Route path="/setting/:id?" component={Setting}></Route>
A頁面
let id = 1;
<Link to={{pathname: `/setting/${id}`}}>jump --- params</Link>
// 取參
B頁面
this.props.history.match.params.id
js形式傳參及跳轉(zhuǎn)
第一種 使用原生的方式
window.location.hash = '/setting'
// 拼接search參數(shù)
window.location.hash = '/setting?a=1'
// 取值
this.props.history.location.search
第二種 pathname + search
- 同Link的解釋
- 這里的search也不能手動拼接，需要按照要求威酒，同Link跳轉(zhuǎn)錯(cuò)誤嘗試一致
this.props.history.push({
pathname: '/setting',
search: 'a=1'
})
// 取參
this.props.history.location.search
第三種 pathname + state
- 同Link的解釋
this.props.history.push({
pathname: '/setting',
state: {
id: 1
}
})
// 取參
this.props.history.location.state.id
第四種 pathname + 任意屬性
- 同Link的解釋
this.props.history.push({
pathname: '/setting',
abc: {
id: 1
}
})
// 取參
this.props.history.location.abc.id
當(dāng)一個(gè)路由點(diǎn)擊多次窑睁，將會出現(xiàn)警告话告，使用replace，這樣會替換歷史記錄中上一次相同路由記錄卵慰，而push會添加新的相同記錄進(jìn)去，hash路由會有這個(gè)問題佛呻，Browser形式的則不會
Link + replace
<Link to="/setting" replace/>
js
this.props.history.replace('/setting')
注意
- 非<Route path="/setting" component={Setting}>這種形式裳朋，也就是說不是通過Route配置的組件，是訪問不到this.props.history這個(gè)屬性的
