React路由需要借助react-router-dom
基礎(chǔ)用法
1恩够、引入：import {BrowserRouter,NavLink,Route,Switch,Redirect} from 'react-router-dom'
2、去index.js把App包裹起來
<BrowserRouter>
<App />
</BrowserRouter>
3、注冊(cè)路由：
<MYNavLink to="/about">About</MYNavLink>
<MYNavLink to="/home">Home</MYNavLink>
（這里的MYNavLink是對(duì)NavLink的封裝，包裹了一些類名）
4、匹配路由
<Switch>
{/* 注冊(cè)路由 默認(rèn)的是模糊匹配 扒吁，要開啟精準(zhǔn)(exact)匹配，需要加上exact /}
<Route path='/about' component={About}/>
<Route path='/home' component={Home}/>
<Redirect to='/home'/>
{/如果前面的都沒有匹配上室囊，就重定向到redirect指定的路徑 */}
</Switch>
嵌套路由
需要把多級(jí)的路由都寫出來雕崩，而且上級(jí)路由要用模糊匹配，如
<Route path='/about/msg1' component={msg1}/>
向路由組件傳參
params傳參
<Link to={`/home/msg/${obj.id}/${obj.title}`}>{obj.title}</Link>
<Route path="/home/msg/:id/:title" component={detail}>
然后再detail組件的this.props.match.params里就可以取到包含了id和title屬性的數(shù)據(jù)對(duì)象
傳遞search參數(shù)
<Link to={`/home/msg/?id=${obj.id}&title=${obj.title}`}>{obj.title}</Link>
<Route path="/home/msg" component={detail}> 無需顯示的聲明接受波俄，正常注冊(cè)即可
在detail組件的this.props.location.search里面晨逝，但是，沒有自動(dòng)整理成對(duì)象的形式
不過react腳手架為我們提供了一個(gè)庫可以幫忙做這件事
import qs from "querystring"
var obj = {a:1, b: 2}
qs.stringify(obj) // a=1&b=2
let str = 'name=zhangsan&age=18'
qs.parse(str) // {name:'zhangsan', age: 18}
state 參數(shù)（不會(huì)把傳遞的東西在地址欄里展示出來）
<Link to={{pathname:"/home/msg", state:{id: obj.id, title:obj.title}}}>{obj.title}</Link>
<Route path="/home/msg" component={detail}> 無需顯示的聲明接受懦铺，正常注冊(cè)即可
使用：
this.props.location.state 已經(jīng)整理好成一個(gè)對(duì)象了
關(guān)于瀏覽痕跡
在react中捉貌，組件的導(dǎo)航用的是push模式，是會(huì)留下痕跡的，可以回退趁窃。如果我們想用replace模式讓它不留痕跡呢怎么辦呢牧挣？給路由鏈接加上屬性replace={true}
編程式路由導(dǎo)航
去主動(dòng)的調(diào)用this.props.history.push(或是replace)來實(shí)現(xiàn)路由跳轉(zhuǎn)
去主動(dòng)的調(diào)用this.props.history.goBack或者是goForward來實(shí)現(xiàn)后退或前進(jìn)
this.props.history.go() 接受一個(gè)數(shù)值作為參數(shù)表示要前進(jìn)幾步，傳入負(fù)數(shù)表示后退多少步
withRouter
在react中醒陆，只有路由組件的props里才有history瀑构，可是如果我們的需求是想在一般組件里定義一些button來實(shí)現(xiàn)back和forward呢 ？
暴露一般組件時(shí)刨摩，
export default withRouter(componentName)
withRouter是react-router-dom里面的一個(gè)函數(shù)寺晌，它接受一個(gè)一般組件，然后給它加上路由組件所擁有的特殊的東西
HashRouter和BrowersRouter的對(duì)比
1澡刹、兼容性呻征，HashRouter更好，應(yīng)該BrowersRouter是對(duì)H5的History的再封裝
2罢浇、path上HashRouter多一個(gè)#
3陆赋、HashRouter刷新后路由參數(shù)的state會(huì)丟失，BrowserRouter卻不會(huì)嚷闭，因?yàn)樗约安僮髟诹藀rops.location的state里
4攒岛、HashRouter有時(shí)候可以解決一些路徑錯(cuò)誤的問題
