- vue里面指向地址的屬性叫path，看到網(wǎng)上很多文章采盒，react路由傳參指向的屬性也叫path震叮，但是：目前react-router-dom：5.1.2指向地址的屬性叫做pathname
1诚纸、 pathname + search
- 優(yōu)點(diǎn)：刷新也在........
- 缺點(diǎn)：只能傳字符串，顯式傳參，不能傳過大的數(shù)據(jù)憔四，傳遞數(shù)據(jù)過多會(huì)讓地址變的很丑
A頁面
<Link to={{pathname: '/setting', search:'id=1'}}>jump --- search</Link>
this.props.history.push({
pathname: '/setting',
search: 'a=1'
})
// 取參
B頁面
this.props.history.location.search
2伐憾、pathname + state
- 這種形式的傳參式隱式的，刷新頁面就沒有了
- 和任意屬性一致秒际，但是官方應(yīng)該指定的是這個(gè)悬赏，因?yàn)樗⑿潞髄ocation中會(huì)存在state: undefined，任意屬性則不會(huì)
A頁面
<Link to={{pathname: '/setting', state:{id:1}}}>jump --- state</Link>
// 取參
B頁面
this.props.history.location.state.id
3娄徊、pathname + params
- 配合動(dòng)態(tài)路由傳參
- 優(yōu)缺點(diǎn)同第一種pathname + search的方式
// 動(dòng)態(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
4、replace
<Link to="/setting" replace/>
this.props.history.replace('/setting')
5寄锐、react withRouter
- 高階組件中的withRouter, 作用是將一個(gè)組件包裹進(jìn)Route里面, 然后react-router的三個(gè)對象history, location, match就會(huì)被放進(jìn)這個(gè)組件的props屬性中.
import React from 'react'
import {
NavLink,
withRouter
} from "react-router-dom"
class Nav extends React.Component{
handleClick = () => {
// Route 的 三個(gè)對象將會(huì)被放進(jìn)來, 對象里面的方法可以被調(diào)用
console.log(this.props);
}
render() {
return (
<div >
llaala
</div>
);
}
}
// 導(dǎo)出的是 withRouter(Nav) 函數(shù)執(zhí)行
export default withRouter(Nav)
