React懒加载路由以及组件

Explain

需要用到react的脚手架，路由使用的是react-router-dom.懒加载分为组件懒加载和路由懒加载，会使用到react中的lazy和react.lazy

Sound Code

// 引入react
import React,{lazy,Suspense} from 'react
//路由
import { Route, Switch, NavLink } from 'react-router-dom'
// 自定义组件 使用懒加载的方式引入 
const Home= React.lazy(() =>  import('../home') )
const Detail = React.lazy(() =>  import('../detail') )
// lazy和上面的react.lazy是一样的
//const Home= lazy(() =>  import('../home') )
//const Detail = lazy(() =>  import('../detail') )
export default class RouterDom extends Component {
    render() {
        return (
            <div>
                {/* 路由导航 */}
                <NavLink to='/home'>首页</NavLink>
                <NavLink to='/detail'>详情页面</NavLink>
                {/* 
                    注册路由
                    Suspense ： 多个懒加载组件时，需要用到这个组件去嵌套(必须)
                    fallback： 加载时调用的组件
                 */}
                <Suspense fallback={<h1>loading....</h1>}>
                    <Switch>
                        <Route path='/home' component={StatusDemo}></Route>
                        <Route path='/detail' component={DetailOne}></Route>
                    </Switch>
                </Suspense>
            </div>
        )
    }
}