資訊專欄INFORMATION COLUMN
摘要：驗(yàn)證路由所謂的驗(yàn)證路由其實(shí)就是該路由的外層加了一層驗(yàn)證機(jī)制，有授權(quán)的用戶才能進(jìn)入，反之都無法進(jìn)入。一起學(xué)系列也隨著這篇的結(jié)束而告一段落了。大家一起加油最后再獻(xiàn)上和本篇博文有關(guān)的代碼鏈接和示例頁面
時(shí)隔那么久，博主終于從睡夢中醒來開始更新博客啦！為自己的勤勞歡呼...(pia pia pia打臉)！
本次我們接著上一篇博客繼續(xù)聊React-Router4。上篇我們主要了解了React-Router4常用組件以及常用的路由類型，本次我們接著說“嵌套路由”和“驗(yàn)證路由”。
顧名思義，嵌套路由其實(shí)就是在某個(gè)路由的末端再接上一個(gè)包含路由的組件，這樣就形成了嵌套路由。最直接的說，本片博客的例子代碼結(jié)構(gòu)就是嵌套路由。形象化一點(diǎn)，我們可以將項(xiàng)目中的一整套路由想象成一棵樹，樹根是root路由，向上就是一些分叉的樹枝(子路由)，分叉的樹枝再順著向上找還會(huì)有更多的分叉，這樣就是“嵌套”。說的再多沒有一個(gè)圖來得清楚！
從根/A到中間一段/A/B，再到末端(葉子節(jié)點(diǎn))/A/B/C。這就是嵌套路由相對(duì)合理的解釋了。
這里我們看下部分有代表性的代碼：
...
可以看出${URL}/Fronted對(duì)應(yīng)的組件是Technology。再看下Technology的代碼：
class Technology extends Component {
render() {
const PATH = this.props.path;
return (
)
}
}
可以看出Technology組件中也包含了一層路由。上篇中博主有說過，不要在非末端路由使用exact，相當(dāng)于示例圖中的/A/B，一旦在這個(gè)路由
所謂的驗(yàn)證路由其實(shí)就是該路由的外層加了一層驗(yàn)證機(jī)制，有授權(quán)的用戶才能進(jìn)入，反之都無法進(jìn)入。驗(yàn)證路由實(shí)現(xiàn)起來也很簡單，其實(shí)就是對(duì)某一個(gè)用來做驗(yàn)證的參數(shù)進(jìn)行校驗(yàn)，例子中有具體的代碼實(shí)現(xiàn)。什么？這就結(jié)束了？當(dāng)然不是，與其把驗(yàn)證路由的實(shí)現(xiàn)方法說一遍不如將withRouter這個(gè)方法普及下，授人以魚不如授人以漁。
withRouter從名字可以看出這個(gè)方法其實(shí)和Router有關(guān)。廢話，本篇不就是在說Router嗎？好吧！說的也是。
但是我們得換個(gè)角度去看，它到底和Router有什么樣的關(guān)系呢？先一起回想一下，如果想獲得history,location,match這三個(gè)對(duì)象？如何去做？認(rèn)真看例子代碼的盆友肯定會(huì)注意到，只有在
class Fronted extends Component { render() { console.log(this.props); return ( Fronted
) } }
打印出來的結(jié)果
但如果不這樣做該用哪種方式去獲得這三個(gè)對(duì)象呢？那就輪到withRouter大展身手了。放碼過來了
const AuthButton = withRouter(
({ history }) =>
AuthTool.isAuthenticated ? (
Welcome!{" "}
) : (
You are not logged in!
)
);
withRouter接受一個(gè)方法或者任何一個(gè)自定義的組件。這樣就可以獲得我們需要的跟路由有關(guān)的對(duì)象了。
本篇篇幅不是很長，但介紹的方法著實(shí)很有實(shí)用的啊。
emmmmm...《一起學(xué)React系列》也隨著這篇的結(jié)束而告一段落了。在此感謝大家的關(guān)注，也很感謝自己能堅(jiān)持寫博文。大家一起加油！！！！
最后再獻(xiàn)上和本篇博文有關(guān)的代碼鏈接和示例頁面
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/109056.html
摘要：中的包中的包主要有三個(gè)和。的理念上面提到的理念是一切皆組件以下統(tǒng)一稱組件。從這點(diǎn)來說的確方便了不少，也迎合一切皆組件的理念。組件是中主要的組成單位，可以認(rèn)為是或的路由入口。將該標(biāo)示為嚴(yán)格匹配路由。的屬性追加一條。 2019年不知不覺已經(jīng)過去19天了，有沒有給自己做個(gè)總結(jié)？有沒有給明年做個(gè)計(jì)劃？當(dāng)然筆者已經(jīng)做好了明年的工作、學(xué)習(xí)計(jì)劃；同時(shí)也包括該系列博客剩下的博文計(jì)劃，目前還剩4篇：分別...
稍微整理了一下自己平時(shí)看到的前端學(xué)習(xí)資源，分享給大家。 html MDN：Mozilla開發(fā)者網(wǎng)絡(luò) SEO：前端開發(fā)中的SEO css 張鑫旭：張鑫旭的博客 css精靈圖：css精靈圖實(shí)踐 柵格系統(tǒng)：詳解CSS中的柵格系統(tǒng) 媒體查詢：css媒體查詢用法 rem布局：手機(jī)端頁面自適應(yīng)布局 移動(dòng)前端開發(fā)之viewport的深入理解:深入理解viewport 淘寶前端布局：手機(jī)淘寶移動(dòng)端布局 fl...
摘要：小弟在前端摸爬滾打一段時(shí)間，發(fā)現(xiàn)前端的比較好的文檔比較分散，特別是中文的，我平時(shí)都是收藏在瀏覽器里，以后有好的教程和綜合性的文檔我會(huì)更新到這里。小組中文文檔，很全。 小弟在前端摸爬滾打一段時(shí)間，發(fā)現(xiàn)前端的比較好的文檔比較分散，特別是中文的，我平時(shí)都是ctrl+D收藏在瀏覽器里，以后有好的教程和綜合性的文檔我會(huì)更新到這里。一則可以做個(gè)記錄，防止丟失。二則有需要的朋友可以來我這里找一找。 ...
摘要：前言非正經(jīng)入門是相對(duì)正經(jīng)入門而言的。不過不要緊，正式學(xué)習(xí)仍需回到正經(jīng)入門的方式。快速入門建議先學(xué)會(huì)用拼文寫文檔注冊(cè)一個(gè)賬號(hào)，把庫到自己名下，然后用這個(gè)庫寫自己的博客，參見這份介紹。會(huì)用拼文寫文章，相當(dāng)于開發(fā)已入門三分之一了。 本系列博文從 Shadow Widget 作者的視角，解釋該框架的設(shè)計(jì)要點(diǎn)，既作為用戶手冊(cè)的補(bǔ)充，也從更本質(zhì)角度幫助大家理解 Shadow Widget 為什么這...
閱讀 1645·2021-10-09 09:44
閱讀 2814·2021-10-08 10:04
閱讀 2478·2021-09-26 09:55
閱讀 3859·2021-09-22 10:02
閱讀 3317·2019-08-29 17:08
閱讀 1075·2019-08-29 15:08
閱讀 2963·2019-08-26 13:52
閱讀 3281·2019-08-26 13:34
