使用 dva 如何配置异步加载路由组件
来源:https://www.jianshu.com/p/69694013e36b
-----------------------------------------------------
普通方式 文件目录:src/route.js
import React from 'react'
import { Router, Route, Switch } from 'dva/router'
import IndexPage from './routes/IndexPage';
import Category from './routes/Category';
function RouterConfig({ history, app }) {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/category" exact component={Category} />
</Switch>
</Router>
)
}
export default RouterConfig
1. 使用异步路由加载组件 在文件头部引入
import dynamic from 'dva/dynamic'
然后删除以下代码
import IndexPage from './routes/IndexPage';
import Category from './routes/Category';
在RouteConfig函数中添加以下代码即可
const CompontentPage = dynamic({
component: () => import('./routes/CompontentPage')
})
const CompontentPage1 = dynamic({
component: () => import('./routes/CompontentPage1')
})
完整实例
import React from 'react'
import { Router, Route, Switch } from 'dva/router'
import dynamic from 'dva/dynamic'
function RouterConfig({ history, app }) {
const IndexPage = dynamic({
app,
component: () => import('./routes/IndexPage')
})
const Category = dynamic({
app,
component: () => import('./routes/Category')
})
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/category" exact component={Category} />
</Switch>
</Router>
)
}
export default RouterConfig
很简单把~~
使用 dva 如何配置异步加载路由组件的更多相关文章
- angular配置懒加载路由的思路
前言 本人记性不好,对于别人很容易记住的事情,我愣是记不住,所以还是靠烂笔头来帮我长长记性. 参考文章:https://blog.csdn.net/xif3681/article/details/84 ...
- vue 异步加载远程组件(支持编译less语法)
本代码已组件化,可以直接使用. 说明:本组件可以直接解析.vue文件,为了支持less语法解析,在组件中引入less.js,可在less官网下载. 组件代码 <template> < ...
- Vue中router路由异步加载组件-优化性能
何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...
- React配合Webpack实现代码分割与异步加载
这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- Vue 组件异步加载(懒加载)
一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...
- 插件使用一树形插件---zTree一zTree异步加载
zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...
- react异步加载组件
1. 创建 asyncComponent 异步加载工具 import React from 'react' function asyncComponent(loadComponent){ class ...
- Android-Universal-Image-Loader 图片异步加载类库的使用(超详细配置)
这个图片异步加载并缓存的类已经被很多开发者所使用,是最常用的几个开源库之一,主流的应用,随便反编译几个火的项目,都可以见到它的身影. 可是有的人并不知道如何去使用这库如何进行配置,网上查到的信息对于刚 ...
- 【转】Android-Universal-Image-Loader 图片异步加载类库的使用(超详细配置)
Android-Universal-Image-Loader 原文地址:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载 ...
随机推荐
- Windows Server 2008安装IIS 7与配置
一.安装IIS 7 1.鼠标右键[我的电脑(Computer)]→[管理(Manager)] 2.选择[角色(Roles)],右键[添加角色(Add Roles)],弹出[添加角色向导(Add Rol ...
- Linux SPI初始化及接口函数代码细究
2012-01-08 22:11:38 目的:我需要掌握spi驱动相关数据结构关系,及在哪部分函数中把这些数值进行底层寄存器赋值的.结合应用层函数完成spi驱动的代码测试.已达到灵活修改的目的. 按顺 ...
- CCF CSP 201809-2 买菜
题目链接:http://118.190.20.162/view.page?gpid=T78 问题描述 小H和小W来到了一条街上,两人分开买菜,他们买菜的过程可以描述为,去店里买一些菜然后去旁边的一个广 ...
- vue 重构项目第一步(vue-cli跟bootstrap)
一.先安装jq跟bootstrap 1.因为bootstrap依赖jq,先安装jq----->npm install jquery@1.11.3 --save-dev ----->可以 ...
- JS所包含的大纲内容,以及JS中数据类型、运算符的介绍
JavaSctipt javascript:1.特效2.表单验证 原理:何时?1.找到标签 何时?2.操作标签 写在那里? 内联(行内)(不推荐直接写js代码,经常写方法调用) 写在标签里面,以属性的 ...
- java导出csv格式文件
导出csv格式文件的本质是导出以逗号为分隔的文本数据 import java.io.BufferedWriter; import java.io.File; import java.io.FileIn ...
- java导出excel,多表头合并
要求结果图如下: 有空补充具体逻辑 参考:https://blog.csdn.net/dj0721/article/details/72463042 HSSFColor 背景颜色选择 参考:htt ...
- Spring cloud Greenwich Eureka
1.父工程POM文件中: <dependencyManagement> <dependencies> <!--spring cloud--> <depende ...
- PyGame实现情人节表白利器
前提:写不出那么那个的话哇,随便写写,随便看看,重在代码(文章末尾有免费完整源代码) 实验环境: pygame 1.9.4 pycharm python3.6 实现思路: pygame.display ...
- 编译openwrt时报错:g++: internal compiler error: Killed (program cc1plus)
答: 这是内存不足导致的,增大内存或者减少运行的线程即可