路由懒加载

本节目标：理解“路由懒加载”的核心思路，并能把它用于实际开发或面试表达。

src\index.js
importReact, { Suspense } from'react';importReactDOM from'react-dom';import{  BrowserRouter asRouter, Route,Link} from'react-router-dom';
functionlazy(load) {  returnclassextendsReact.Component{    state = { InnerComponent: null}    componentDidMount() {      load().then(result=>{        this.setState({ InnerComponent: result.default || result });      });    }    render() {      let{ InnerComponent } = this.state;      returnInnerComponent ? <InnerComponent/>: null;    }  }}constLazyHome = React.lazy(()=>import(/* webpackChunkName: "Home" */'./components/Home'));constLazyLogin = React.lazy(()=>import(/* webpackChunkName: "Login" */'./components/Login'));functionLoading() {  return<div>加载中......</div>}functionSuspenseHome() {  return(    <Suspensefallback={<Loading/>}>      <LazyHome/></Suspense>)}functionSuspenseLogin() {  return(    <Suspensefallback={<Loading/>}>      <LazyLogin/></Suspense>)}//webpack chunkFilenameReactDOM.render(  <Router><div><ul><li><Linkto="/">Home</Link></li><li><Linkto="/login">User</Link></li></ul><Routeexactpath="/"component={SuspenseHome}/><Routepath="/login"component={SuspenseLogin}/></div></Router>,  document.getElementById('root'));
**链接**

[zhufeng_react_router](https://gitee.com/zhufengpeixun/zhufeng_react_router_20201106_prepare)

> 来自 <http://www.zhufengpeixun.com/strong/html/106.3.react_router.html#t396.%20%E5%AE%9E%E7%8E%B0Switch>