一、學(xué)習(xí)文檔
v6文檔：https://reactrouter.com
v5文檔：https://v5.reactrouter.com/web/guides/quick-start
安裝 cnpm install react-router-dom@5.3.0 -S
二、路由標(biāo)簽
1、Switch
Switch必須是Route、Redirect的直接父組件。
那么Switch有什么作用？
加快路由匹配的速度。
2、Redirect
用于重定向，和Route是兄弟關(guān)系，一般放在Route之后。
3、訪問路由api
在react-router-dom路由系統(tǒng)中，不是每個(gè)React組件都能訪問到路由api。只有那些被Route直接包裹過的React頁面組件可以通過props訪問到路由api。
那些未被Route直接包裹的React組件默認(rèn)無法訪問路由api，怎么辦呢？
可以通過屬性繼承{...props}語法，把頁面組件的props（路由API）手動向后代組件傳遞。
使用withRouter這個(gè)高階組件，向組件中注入路由API。（非Hooks編程中用得比較多）
使用react-router-dom（v5）提供的hooks api直接使用路由API。
三、路由傳參
params動態(tài)路由傳參
query傳參
四、嵌套視圖
Route所包裹的組件中又使用了Route
在嵌套視圖時(shí)，一定要用Switch把二級Route路由包裹起來。
在編寫Route規(guī)則，不要“一刀切地加exact”，注意exact對 / 的影響
? function App() {
? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? <Switch>
? ? ? ? ? ? ? ? ? ? <Route path='/list' component={List} />
? ? ? ? ? ? ? ? </Switch>
? ? ? ? ? ? ? ? ) }
? ? ? ? ? ? ? ? function List() {
? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? <Switch>
? ? ? ? ? ? ? ? ? ? <Route path='/list/video' component={ListVideo} />
? ? ? ? ? ? ? ? </Switch>
? ? ? ? ? ? ? ? ) }
五、代碼分割
React.Suspense 、React.lazy() 用React這兩個(gè)API也能實(shí)現(xiàn)“代碼分割”，但推薦使用@loadable/component
