[ 一起學React系列 -- 12 ] React-Router4 (2)

chaos_G 發布于2019-08-26 13:34 / 3266人閱讀

摘要：驗證路由所謂的驗證路由其實就是該路由的外層加了一層驗證機制，有授權的用戶才能進入，反之都無法進入。一起學系列也隨著這篇的結束而告一段落了。大家一起加油最后再獻上和本篇博文有關的代碼鏈接和示例頁面

時隔那么久，博主終于從睡夢中醒來開始更新博客啦！為自己的勤勞歡呼...(pia pia pia打臉)！
本次我們接著上一篇博客繼續聊React-Router4。上篇我們主要了解了React-Router4常用組件以及常用的路由類型，本次我們接著說“嵌套路由”和“驗證路由”。

嵌套路由

顧名思義，嵌套路由其實就是在某個路由的末端再接上一個包含路由的組件，這樣就形成了嵌套路由。最直接的說，本片博客的例子代碼結構就是嵌套路由。形象化一點，我們可以將項目中的一整套路由想象成一棵樹，樹根是root路由，向上就是一些分叉的樹枝(子路由)，分叉的樹枝再順著向上找還會有更多的分叉，這樣就是“嵌套”。說的再多沒有一個圖來得清楚！

從根/A到中間一段/A/B，再到末端(葉子節點)/A/B/C。這就是嵌套路由相對合理的解釋了。
這里我們看下部分有代表性的代碼：

...
/Fronted
/Fronted/WebPack
...

 } />
...

可以看出${URL}/Fronted對應的組件是Technology。再看下Technology的代碼：

class Technology extends Component {
    render() {
        const PATH = this.props.path;
        return (
            
                
                
            
        )
    }
}

可以看出Technology組件中也包含了一層路由。上篇中博主有說過，不要在非末端路由使用exact，相當于示例圖中的/A/B，一旦在這個路由中使用了exact，那么匹配路由的時候一旦到了該出路由后就不會尋找到/A/B/C，因為已經被exact “截斷” 了。

驗證路由

所謂的驗證路由其實就是該路由的外層加了一層驗證機制，有授權的用戶才能進入，反之都無法進入。驗證路由實現起來也很簡單，其實就是對某一個用來做驗證的參數進行校驗，例子中有具體的代碼實現。什么？這就結束了？當然不是，與其把驗證路由的實現方法說一遍不如將withRouter這個方法普及下，授人以魚不如授人以漁。

withRouter

從名字可以看出這個方法其實和Router有關。廢話，本篇不就是在說Router嗎？好吧！說的也是。
但是我們得換個角度去看，它到底和Router有什么樣的關系呢？先一起回想一下，如果想獲得history,location,match這三個對象？如何去做？認真看例子代碼的盆友肯定會注意到，只有在中跳轉到的組件才能在props中獲取到這三個對象。



class Fronted extends Component {
    render() {
        console.log(this.props);
        return (
            Fronted
        )
    }
}

打印出來的結果

但如果不這樣做該用哪種方式去獲得這三個對象呢？那就輪到withRouter大展身手了。放碼過來了

const AuthButton = withRouter(
    ({ history }) =>
        AuthTool.isAuthenticated ? (
            
                Welcome!{" "}
                
            
        ) : (
                
                    You are not logged in!
                
                
            )
);

withRouter接受一個方法或者任何一個自定義的組件。這樣就可以獲得我們需要的跟路由有關的對象了。

本篇篇幅不是很長，但介紹的方法著實很有實用的啊。
emmmmm...《一起學React系列》也隨著這篇的結束而告一段落了。在此感謝大家的關注，也很感謝自己能堅持寫博文。大家一起加油！！！！
最后再獻上和本篇博文有關的代碼鏈接和示例頁面

GPU云服務器云服務器 react-router4 react-router 系列4 一起學linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109056.html

[ 一起學React系列 -- 11 ] React-Router4 (1)

摘要：中的包中的包主要有三個和。的理念上面提到的理念是一切皆組件以下統一稱組件。從這點來說的確方便了不少，也迎合一切皆組件的理念。組件是中主要的組成單位，可以認為是或的路由入口。將該標示為嚴格匹配路由。的屬性追加一條。 2019年不知不覺已經過去19天了，有沒有給自己做個總結？有沒有給明年做個計劃？當然筆者已經做好了明年的工作、學習計劃；同時也包括該系列博客剩下的博文計劃，目前還剩4篇：分別...

tinysun1234 2019-08-23 14:49 評論0 收藏0
前端學習資源整理

稍微整理了一下自己平時看到的前端學習資源，分享給大家。 html MDN：Mozilla開發者網絡 SEO：前端開發中的SEO css 張鑫旭：張鑫旭的博客 css精靈圖：css精靈圖實踐柵格系統：詳解CSS中的柵格系統媒體查詢：css媒體查詢用法 rem布局：手機端頁面自適應布局移動前端開發之viewport的深入理解:深入理解viewport 淘寶前端布局：手機淘寶移動端布局 fl...

siberiawolf 2019-08-21 11:27 評論0 收藏0
前端綜合性文檔和教程總結（持續更新）

摘要：小弟在前端摸爬滾打一段時間，發現前端的比較好的文檔比較分散，特別是中文的，我平時都是收藏在瀏覽器里，以后有好的教程和綜合性的文檔我會更新到這里。小組中文文檔，很全。小弟在前端摸爬滾打一段時間，發現前端的比較好的文檔比較分散，特別是中文的，我平時都是ctrl+D收藏在瀏覽器里，以后有好的教程和綜合性的文檔我會更新到這里。一則可以做個記錄，防止丟失。二則有需要的朋友可以來我這里找一找。 ...

piglei 2019-08-20 10:19 評論0 收藏0
React 可視化開發工具 Shadow Widget 非正經入門（之一：React 三宗罪）

摘要：前言非正經入門是相對正經入門而言的。不過不要緊，正式學習仍需回到正經入門的方式。快速入門建議先學會用拼文寫文檔注冊一個賬號，把庫到自己名下，然后用這個庫寫自己的博客，參見這份介紹。會用拼文寫文章，相當于開發已入門三分之一了。本系列博文從 Shadow Widget 作者的視角，解釋該框架的設計要點，既作為用戶手冊的補充，也從更本質角度幫助大家理解 Shadow Widget 為什么這...

dongxiawu 2019-08-21 11:43 評論0 收藏0