react.lazy 路由懒加载_教程30——内层路由的配置及路由的懒加载（项目）

前言：我们是从教材28开始讲项目的，延用教程28及以后的例子，做好备份保存。

现在配置里面的路由，在 App 里面去配置

App .js 文件：

import 

修改后

注意代码命名的大小写！！！我这里有一个错误
把 routes 文件夹下的“admainRouter”改为“adminRouter”

import 

结果

当我们输入什么页面的名字，就跳转到该页面；当输入“非页面名字”乱七八糟的东西的时候，就跳转到404页面；这是比较合理的页面逻辑的写法方案。

这里我们要讲一下 network--就是浏览器的网络请求，就是浏览器网络加载

这里面并没有去新加载我们的 js

这时候我们就需要配置路由的按需加载！--即路由的懒加载！！

什么是路由懒加载？

也叫延迟加载，即在需要的时候进行加载，随用随载。

为什么需要懒加载？简单的说就是：进入首页不用一次加载过多资源造成用时过长！！

单页面应用，如果没有应用懒加载，运用 webpack 打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了 loading 也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

安装 路由懒加载：

npm 

提供的一个 React Loadable 是一个小型库，它使以组件为中心的代码分割变得非常容易。

react-loadable​www.npmjs.com

官网上的例子：

import 

React Loadable 还是一个高阶组件

怎么用？

在 components 文件夹下新建一个 Loading 文件夹和 index.js 文件

export 

在Loading 文件夹下面在新建一个 index.js 文件

import 

在 views 文件夹下面的 index.js 文件

import 

npm start 运行一下

路由就配置好了

在 views 文件夹下面的 loadbale.js 文件：

import 

这里有一个大小写问题

写一个伪 load 就可以了：Load:load

import 

loadbale.js 文件：

import 

结果

App.js：

import 

!！前面命名有一个错误修改一下，所有的“Eidt”改为“Edit”包括文件名

loadbale.js 文件：

import 

状态里面可以是组件！

目录结构

over