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

時隔那麼久，博主終於從睡夢中醒來開始更新博客啦！爲本身的勤勞歡呼...(pia pia pia打臉)！
本次咱們接着上一篇博客繼續聊React-Router4。上篇咱們主要了解了React-Router4經常使用組件以及經常使用的路由類型，本次咱們接着說「嵌套路由」和「驗證路由」。

嵌套路由

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

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

...
<li><NavLink exact activeStyle={{ fontWeight: 'bold', color: 'red' }} to={`${URL}/Fronted`}>/Fronted</NavLink></li>
<li><NavLink activeStyle={{ fontWeight: 'bold', color: 'red' }} to={`${URL}/Fronted/WebPack`}>/Fronted/WebPack</NavLink></li>
...

<Route path={`${PATH}/Fronted`} component={() => <Technology path={PATH} />} />
...

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

class Technology extends Component {
    render() {
        const PATH = this.props.path;
        return (
            <Switch>
                <Route path={`${PATH}/Fronted/:name`} component={Name} />
                <Route path={`${PATH}/Fronted`} component={Fronted} />
            </Switch>
        )
    }
}

能夠看出Technology組件中也包含了一層路由。上篇中博主有說過，不要在非末端路由使用exact，至關於示例圖中的/A/B，一旦在這個路由<Route/>中使用了exact，那麼匹配路由的時候一旦到了該出路由後就不會尋找到/A/B/C，由於已經被exact 「截斷」 了。

驗證路由

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

withRouter

從名字能夠看出這個方法其實和Router有關。廢話，本篇不就是在說Router嗎？好吧！說的也是。
可是咱們得換個角度去看，它到底和Router有什麼樣的關係呢？先一塊兒回想一下，若是想得到history,location,match這三個對象？如何去作？認真看例子代碼的盆友確定會注意到，只有在<Route/>中跳轉到的組件才能在props中獲取到這三個對象。

<Route path={`${PATH}/Fronted`} component={Fronted} />

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

打印出來的結果

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

const AuthButton = withRouter(
    ({ history }) =>
        AuthTool.isAuthenticated ? (
            <div>
                Welcome!{" "}
                <button
                    onClick={() => {
                        AuthTool.logout(() => history.push("/auth/Auth/Login"));  //登出後跳轉到登陸頁面
                    }}
                >
                    Logout
                </button>
            </div>
        ) : (
                <div>
                    You are not logged in!
                <button
                        onClick={() => {
                            AuthTool.login(() => history.push("/auth/Auth")); //登出後跳轉到實際頁面
                        }}
                    >
                        Login
                </button>
                </div>
            )
);

withRouter接受一個方法或者任何一個自定義的組件。這樣就能夠得到咱們須要的跟路由有關的對象了。

本篇篇幅不是很長，但介紹的方法着實頗有實用的啊。
emmmmm...《一塊兒學React系列》也隨着這篇的結束而告一段落了。在此感謝你們的關注，也很感謝本身能堅持寫博文。你們一塊兒加油！！！！
最後再獻上和本篇博文有關的代碼連接和示例頁面