1狸捅、React-Router-dom;
(1).npm?install?react-router-dom; ->?引入
(2).分類：HahRouter衷蜓、BrowserRouter；? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [1].HahRouter -> localhost:3000/#/topics ->其會(huì)在路徑后添加#,容易與hash#混亂尘喝；? ? ? ? ? ? ? ? ? ? ? [2].取別名[方便后續(xù)修改]：BrowserRouter as Router
(3).<Route path="" component={} ></Route>;
[1].若只有一個(gè)<Route></Route>,默認(rèn)path="/"; ->?其也可以省略
[2].若有多個(gè)<Route></Route>磁浇，最后一個(gè)不寫path,表示除了上面所示的路由，其它路由都會(huì)跳轉(zhuǎn)到該組件朽褪；
(4).<Switch></Switch>;//匹配到便不會(huì)再向下匹配置吓，常配合exact屬性一起使用 =>?匹配一模一樣的，exact={true};也OK缔赠；
(5).<Redirect to=""></Redirect>;//重定向：若是以上都匹配不到衍锚，自動(dòng)跳轉(zhuǎn)到首頁(yè)/或其它頁(yè)
(6).路由跳轉(zhuǎn)<Link to="">; <NavLink to="">;//?最終都轉(zhuǎn)換為<a>標(biāo)簽，但不能取別名嗤堰，Vue中使用tag屬性可以取別名戴质；<NavLink>優(yōu)勢(shì)：其跳轉(zhuǎn)頁(yè)面，系統(tǒng)會(huì)自動(dòng)加類名.active,巧妙利用更改樣式；=>兩者大多結(jié)合exact屬性使用置森；
2斗埂、二級(jí)路由：
3符糊、動(dòng)態(tài)路由：
跳轉(zhuǎn) ->?this.props ->?路由的相關(guān)值
4凫海、高階組件withRouter(); ->?withRouter(組件);包裹組件即可 ->?目的：使用其可讓組件內(nèi)所有元素?fù)碛衪his.props.history/location/match等屬性；
this.props.history.push('/');//重定向路由
5男娄、路由權(quán)限控制 ->?React沒(méi)有相關(guān)API行贪，都要自己寫；
(1).登錄相關(guān)：登錄成功種cookie ->?其它頁(yè)面查看 ->?若有cookie,正常跳轉(zhuǎn)頁(yè)面模闲，若沒(méi)有建瘫，提示框+跳轉(zhuǎn)登錄頁(yè)面；
(2).頁(yè)面獲取數(shù)據(jù)：1.父組件向子組件傳值尸折；2.某頁(yè)面將數(shù)據(jù)設(shè)置到瀏覽器存儲(chǔ)中啰脚，一般為localStorage其獲取到的是JSON對(duì)象，JSON.parse(localStorage.getItem('articleList')); ->?其它頁(yè)面需要數(shù)據(jù)時(shí)实夹，從存儲(chǔ)中拿即可橄浓；
(3).高階組件[包裹 -> 返回具有某功能的組件]
(4).Prompt組件 ->?進(jìn)入/離開(kāi)的時(shí)候都會(huì)進(jìn)行詢問(wèn)；
[1].引入：import { Switch, Route, Redirect, Prompt } from 'react-router-dom';
[2].使用：<Prompt message="" ></Prompt>; message= { () =>{ return true/false }}
補(bǔ)充：
(1).<form onSubmit={ this.handleSubmit }></form>;
(2).e.preventDefault();//React中阻止默認(rèn)事件只有此方法亮航；
(3).<Link>荸实、<NavLink>組件最終都轉(zhuǎn)換為a標(biāo)簽 -> React不能取別名，Vue可以 -> React可使用高階組件來(lái)解決此類需求缴淋；
