React路由
手寫(xiě)路由
控制地址欄

歌手 根據(jù)改變渲染不同的組件
路由插件 react-router
react-router

下載安裝
npm install react-router-dom

路由的基本使用
HashRouter BrowserRouter 哈希路由 歷史路由 作為組件的父容器
控制地址欄的改變
路由跳轉(zhuǎn)后所有的屬性 都可以在目標(biāo)組件的props里進(jìn)行接受
Link 標(biāo)簽 屬性：to、 exact（精準(zhǔn)匹配，屬性路徑和地址欄路徑完全匹配）
NavLink標(biāo)簽 屬性 to 、exact 、 activeClassName

 <NavLink exact to='/singer' activeClassName='selected' className='nav'> 歌手</NavLink>

Route 控制組件的渲染 path exact component render children
render 、children、component都可以顯示組件，優(yōu)先級(jí)為 render>children>component,(在同一標(biāo)簽內(nèi)只能使用一個(gè))

 <Route exact path='/singer' component={Singer}></Route>

Switch 只返回第一個(gè)匹配到的組件
Redirect 重定向

<HashRouter>
  <Link exact to='/singer'>歌手</Link>
  <NavLink exact to='/recomment' activeClassName='hehe'>推薦</NavLink>
  <Switch>
    <Redirect from='/' to='/singer' exact />
    <Route path='/singer' component={組件}></Route>
    <Route path='/recomment' render={組件}></Route>
    <Route path='/singer' children={組件}></Route>
    <Route component={404}>
  </Switch>
</HashRouter>

編程式導(dǎo)航和聲明式導(dǎo)航（尋找路由對(duì)象）
<Link>或<NavLink>實(shí)現(xiàn)路由的跳轉(zhuǎn) 聲明式導(dǎo)航
通過(guò)js路由對(duì)象的方式叫做編程式導(dǎo)航（ push replace go goBack goForwd ）
注意 :正常創(chuàng)建的組件是沒(méi)有路由對(duì)象的

通過(guò)Route 處理過(guò)的組件在props里有路由對(duì)象
通過(guò)withRouter 處理過(guò)的組件也有路由對(duì)象
路由傳參
動(dòng)態(tài)導(dǎo)航 /hehe/:id

 this.props.history.push(`/singer/${us}/${ps}`)

在路由對(duì)象的match 里獲取傳遞的參數(shù)
query傳參：/hehe?us=123&ps=123
相當(dāng)于get方法 接受數(shù)據(jù)在路由對(duì)象的 location里 需要自己做字符解析

this.props.history.push('/singer？us=123&ps=456')

state 傳參：
在路由對(duì)象的location里接受

this.props.history.push({pathname:'/recommend',state:{要傳遞的數(shù)據(jù)}})

嵌套路由
在路由里套路由 所有的組價(jià)都可以使用 Link、 Switch …
嵌套路由的上一級(jí)，千萬(wàn)不能加精準(zhǔn)匹配

<Route path='/singer' render={()=>{
  <Route></Route>
  <Route></Route>
}}></Route>

高階組件
hoc 本質(zhì)是一個(gè)函數(shù) 接受一個(gè)組件作為參數(shù) 返回一個(gè)新的組件
功能性的封裝 減少重復(fù)代碼
一般被高階組件處理過(guò)的組件獲取數(shù)據(jù) 都從props獲取