參考地址：https://www.cnblogs.com/luowenshuai/p/9526341.html
作用：把不是通過路由切換過來的組件中剃袍，將react-router 的 history辛润、location、match 三個對象傳入props對象上
默認情況下必須是經(jīng)過路由匹配渲染的組件才存在this.props，才擁有路由參數(shù)，才能使用編程式導(dǎo)航的寫法蟹但，執(zhí)行this.props.history.push('/detail')跳轉(zhuǎn)到對應(yīng)路由的頁面
然而不是所有組件都直接與路由相連（通過路由跳轉(zhuǎn)到此組件）的，當這些組件需要路由參數(shù)時谭羔，使用withRouter就可以給此組件傳入路由參數(shù)华糖，此時就可以使用this.props
一：如何使用withRouter：
比如app.js這個組件，一般是首頁瘟裸，不是通過路由跳轉(zhuǎn)過來的客叉，而是直接從瀏覽器中輸入地址打開的，如果不使用withRouter此組件的this.props為空景描，沒法執(zhí)行props中的history十办、location、match等方法超棺。
我就通過在App.js組件中使用withRouter來簡單介紹一下：
設(shè)置withRouter很簡單只需要兩步：（1）引入 （2）將App組件 withRouter() 一下
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">import React,{Component} from 'react' import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //引入withRouter
import One from './One' import NotFound from './NotFound' class App extends Component{ //此時才能獲取this.props,包含（history, match, location）三個對象
console.log(this.props); //輸出{match: {…}, location: {…}, history: {…}, 等}
render(){return (<div className='app'>
<NavLink to='/one/users'>用戶列表</NavLink>
<NavLink to='/one/companies'>公司列表</NavLink>
<Switch>
<Route path='/one/:type?' component={One} />
<Redirect from='/' to='/one' exact />
<Route component={NotFound} />
</Switch>
</div>)
}
}
export default withRouter(App); //這里要執(zhí)行一下WithRouter</pre>
](javascript:void(0); "復(fù)制代碼")
二：介紹一個簡單應(yīng)用
可以根據(jù)路由切換瀏覽器的title屬性向族，對props.history進行監(jiān)聽，切換路由的時候獲取當前的路由路徑棠绘，同時可以根據(jù)不同的路由設(shè)置不同的瀏覽器title標題件相。
仍然是App.js組件：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">import React,{Component} from 'react' import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' import One from './One' import NotFound from './NotFound' class App extends Component{
constructor(props){
super(props);
props.history.listen((location)=>{ //在這里監(jiān)聽location對象
console.log(location.pathname); //切換路由的時候輸出"/one/users"和"/one/companies"
switch(location.pathname){ //根據(jù)路徑不同切換不同的瀏覽器title
case '/one/users' : document.title = '用戶列表'; break; case '/one/companies' : document.title = '公司列表'; break; default : break;
}
})
}
render(){ return (<div className='app'>
<NavLink to='/one/users'>用戶列表</NavLink>
<NavLink to='/one/companies'>公司列表</NavLink>
<Switch>
<Route path='/one/:type?' component={One} />
<Redirect from='/' to='/one' exact />
<Route component={NotFound} />
</Switch>
</div>)
}
}
export default withRouter(App);</pre>
](javascript:void(0); "復(fù)制代碼")
頁面效果：
三：當然還有眾多用途夜矗，如果你使用了編程式導(dǎo)航的寫法：
this.props.history.push('/detail') 去跳轉(zhuǎn)頁面，但是報 this.props.history 錯誤 undefined让虐，請在此組件中使用 withRouter 將 history 傳入到 props上紊撕。
