react-路由守卫和懒加载

路由守卫

自己封装

import React, { Component } from 'react'
import {Route,Redirect} from 'react-router-dom'
export default class MyRoute extends Component {
    render() {
        let user = sessionStorage.getItem('user');
        return (
            <div>
                {user ? <Route {...this.props}></Route> : <Redirect to="/login"></Redirect>}
            </div>
        )
    }
}

懒加载(了解)

import React, { Component } from 'react'
function asyncComponents(fn){
    class Zujian extends Component {
        constructor(){
            super()
            this.state = {
                Obj:'',
            }
        }
        componentDidMount(){
            console.log(fn());
            fn().then((module)=>{
                this.setState({Obj:module.default})
            })
        }
        render() {
            const {Obj} = this.state;
            return (
                <div>
                    {Obj ? <Obj {...this.props}></Obj> : null}
                </div>
            )
        }
    }
    return Zujian
}


export default asyncComponents

项目打包

npm run build