一、路由守卫使用场景
当用户登录的时候或者某些情况下需要获取用户的权限所以要做一个高阶组件的渲染劫持
二、路由守卫的使用
在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;