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è)不寫(xiě)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，都要自己寫(xiě)；

(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)解決此類需求；