一起來看React(路由守衛)

原文鏈接：https://juejin.im/post/5d005664f265da1bc64bba64

我們在很多時候都會接觸到路由守衛--->無論是不是做(代碼小子)的人

我們在瀏覽各網頁時會看到頭部的網址,如：

當我們在逛：淘寶/天貓/京東 這一類的網站時我們自定義輸入地址時,我們應該先登錄,如果沒登錄我們應該跳轉到指定頁面

路由守衛:

自定義界面的前置路由守衛,當用戶點擊要進入r組件時，路由守衛發起判斷，如果條件滿足則進入，否則跳轉至pathname組件
復制代碼

在實現路由守衛時:我們首先要安裝

npm install react-router-dom --save-dev //這里可以使用cnpm代替
復制代碼

定義私有開關isLogin為假，在PrivateRoute中使用 然后我們去頁面觸發

import React from 'react'; 
import {Redirect,Route} from 'react-router-dom';
const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={props =>
            Boolean(sessionStorage.getItem("isLogin")) ?
            (
                <Component {...props} />
            )
             : (
                <Redirect
                    to={{
                        pathname: "/",
                        state: { from: props.location }
                    }}
                />
            )
        }
    />
);
export {
    PrivateRoute
}
復制代碼

我們簡單地做幾個路由守衛----（路由跳轉 one two three four 頁並守衛)

我們在頁面內

import One from "./one.js"
import Two from "./two.js"
import Three from "./three.js"
import Four from "./four.js"
復制代碼

引入這四個頁面,並且：

import {PrivateRoute} from "../router/PrivateRoute"
復制代碼

引入我們之前書寫的PrivateRoute，接下來我們書寫我們的點擊事件

<ul>
<li onClick={this.goto.bind(this,"/Main/one")}>第一個</li>
<li onClick={this.goto.bind(this,"/Main/two")}>第二個</li>
<li onClick={this.goto.bind(this,"/Main/three")}>第三個</li>
<li onClick={this.goto.bind(this,"/Main/four")}>第四個</li>
</ul>
復制代碼

當我們點擊我們的N個時都會觸發我們的goto(跳轉)函數

goto(i){
    sessionStorage.setItem("isLogin",true)
    this.props.history.push(i)
}
復制代碼

goto為我們的函數,設置的Item內的IsLogin為true是代表我們可以進行跳轉,如果Islogin==""的話我們將無法進行跳轉。

---->isLogin主要是：路由守衛發起判斷，如果條件滿足則進入，否則跳轉至pathname組件

當以上都滿足時我們要用Swithch和內部的PrivateRoute進行操作

<Switch>
<PrivateRoute path="/Main/one" component={One} ></PrivateRoute>
<PrivateRoute path="/Main/two" component={Two} ></PrivateRoute>
<PrivateRoute path="/Main/three" component={Three} ></PrivateRoute>
<PrivateRoute path="/Main/four" component={Four} ></PrivateRoute>
<Route  path="/" component={One} />
</Switch>  
復制代碼

Switch 是唯一的因為它僅僅只會渲染一個路徑