一、路由守衛使用場景
當用戶登錄的時候或者某些情況下需要獲取用戶的權限所以要做一個高階組件的渲染劫持
二、路由守衛的使用
在component文件夾下新建一個common文件夾用來封裝路由守衛，然后引入到需要使用路由守衛的組件當中
App.js
import React, { Component } from 'react';
import {HashRouter as Router,Route,NavLink,Link,Switch,Redireact} from "react-router-dom"
import Home from './components/home/home'
import List from './components/list/list'
import Login from './components/login/login'
import MyRouter from "./components/common/myRouter" //引入路由守衛
class App extends Component {
render() {
return (
<div>
<Router>
<div>
<Switch> //這里要用Switch，只匹配一個路由路徑，不然路由守衛不起作用
<Route path="/home" component={Home}/>
<MyRouter path="/list" component={List} flag={false}/> //在list組件中應用路由守衛，這里的path，component，flag會傳到myRouter中
<Route path="/login" component={Login}/>
</Switch>
<div id="footer">
<NavLink to="/home">首頁</NavLink>
<NavLink to="/list">列表</NavLink>
</div>
</div>
</Router>
</div>
);
}
}
export default App;
myRouter.js
import React,{Component} from "react"
import {Route,Redirect} from "react-router-dom"
class myRouter extends Component{
render(){
let {path,component,flag} =this.props //這是從外部 （App.js）中傳過來的path和component，flag中的值
return(
flag?<Route path={path} component={component}/>:<Redirect to="/login"/> //當flag是true的時候顯示對應的組件頁面，當flag為false的時候跳轉到登錄頁面 這里使用的就是高階組件中的渲染劫持
)
}
}
export default myRouter
三、react的懶加載
通過異步組件的方式進行懶加載，你訪問到相應模塊了就進行加載，沒有訪問到相應的模塊就不加載，這就是路由的懶加載
使用的場景：
react-loadable 也叫做按需加載
安裝 cnpm i react-loadable --dev
App.js
import Loadable from "react-loadable"
//引入
react-loadable
const Home =Loadable({
//如果組件需要用到懶加載就用這種方式引入組件
loader:()=>import("./components/home/home"),
//引入home組件
loading:"Loading...................."
//這里如果是“”加載的時候顯示的是“”中的值，如果不加引號代表加載的時候顯示的是一個組件中的內容，需要引入這個組件
})
class App extends Component {
render() {
return (
<div>
<Router>
<div>
<Switch> //這里要用Switch，只匹配一個路由路徑，不然路由守衛不起作用
<Route path="/home" render={()=>{ //如果是懶加載的話就要用render渲染組件
return <Home/>
}}/>
</Switch>
<div id="footer">
<NavLink to="/home">首頁</NavLink>
</div>
</div>
</Router>
</div>
);
}
}
export default App;