React实现路由懒加载
https://www.runoob.com/w3cnote/free-html5-css3-loaders-preloaders.html
花蝴蝶在我身边围绕围绕,码代码我惟妙惟肖,还没抓到那诀窍,把握现在
安装:yarn add react-loadable
Loadadle是个函数函数中传了个对象对象中有两个参数
1.需要渲染的组件用import异步的方式
2.loading当组件加载不了时运行loading
开始使用:
用之前到上方官网找到自己想要的懒加载的样式
然后在common文件夹下创建一个新文件夹起名为Loading
注意:Loading文件中的class名要与你刚才在官网上找到的样式的class名相符,样式粘贴复制就可以了然后引到组件中使用就行了
import React from ‘react‘; import "./style";//引入路由样式 export default class Loading extends React.Component{ render(){ return <div className="路由样式中的名字"></div> } }
找到index.js入口文件(引入所有组件的组件)( 使用异步把以前的组件覆盖掉 )