一般我們引入路由像import World from '../World' 這樣引入

而路由懶加載要使用lazy函數

1、懶加載方式引入路由

const World = lazy(() => import('../World'))

2、使用Suspense

只是像第一步那樣還不夠，系統會報錯。

使用了懶加載之后加載路由的時機是點擊對應的路由鏈接時開始發送請求引入路由組件。

假如網速慢就要等待很長的時間，這時候需要顯示正在加載中的文字或效果以提升用戶體驗。

這是要用到Suspense，使用它將Route包裹，并添加fallback屬性，值為文字或組件

import React, { PureComponent, Suspense, lazy } from "react";

// 把引入import Login from "../../pages/login"; 換成下面這種寫法
 const AppletCode = lazy(() => import("../../pages/applet-code"));


...


 <Suspense fallback={<h3>Loading.....</h3>}>
    //由于路由的默認是多次匹配（既：通過for循環遍歷一遍每個路由組件，找到所有對應該路徑的路由組件來展，如果路由組件很多的話造成了效率過低）
   //Switch 可以提高路由匹配效率（單一匹配），匹配到之后不會繼續向下查找匹配。
   <Switch>
     {this.routeHavePermission(<Route path={"/小程序"} component={AppletCode} />)}
   </Switch>
</Suspense>




注意??
1、通常情況下，path 和 component 是一一對應的關系。
2、Switch 可以提高路由匹配效率（單一匹配），匹配到之后不會繼續向下查找匹配。
3、Switch可以解決router的唯一渲染，能夠保證一個路由只渲染一個組件路徑。
4、如果不使用Switch，當一個path匹配到多個component時，會將所有匹配到的component都渲染出來。