成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

chaos_G / 3284人閱讀

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

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

嵌套路由

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

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

...

  • /Fronted
    • 

  • /Fronted/WebPack
    • 
...

 } />
...

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

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

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

    驗證路由

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

    withRouter

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

    

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

    打印出來的結(jié)果

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

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

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

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

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109056.html

    相關(guān)文章

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

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

      tinysun1234 評論0 收藏0

    • 前端學(xué)習(xí)資源整理

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

      siberiawolf 評論0 收藏0

    • 前端綜合性文檔和教程總結(jié)（持續(xù)更新）

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

      piglei 評論0 收藏0

    • React 可視化開發(fā)工具 Shadow Widget 非正經(jīng)入門（之一：React 三宗罪）

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

      dongxiawu 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <