来源: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 如何配置异步加载路由组件的更多相关文章

  1. angular配置懒加载路由的思路

    前言 本人记性不好,对于别人很容易记住的事情,我愣是记不住,所以还是靠烂笔头来帮我长长记性. 参考文章:https://blog.csdn.net/xif3681/article/details/84 ...

  2. vue 异步加载远程组件(支持编译less语法)

    本代码已组件化,可以直接使用. 说明:本组件可以直接解析.vue文件,为了支持less语法解析,在组件中引入less.js,可在less官网下载. 组件代码 <template> < ...

  3. Vue中router路由异步加载组件-优化性能

    何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...

  4. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  5. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

  6. 插件使用一树形插件---zTree一zTree异步加载

    zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...

  7. react异步加载组件

    1. 创建 asyncComponent 异步加载工具 import React from 'react' function asyncComponent(loadComponent){ class ...

  8. Android-Universal-Image-Loader 图片异步加载类库的使用(超详细配置)

    这个图片异步加载并缓存的类已经被很多开发者所使用,是最常用的几个开源库之一,主流的应用,随便反编译几个火的项目,都可以见到它的身影. 可是有的人并不知道如何去使用这库如何进行配置,网上查到的信息对于刚 ...

  9. 【转】Android-Universal-Image-Loader 图片异步加载类库的使用(超详细配置)

    Android-Universal-Image-Loader 原文地址:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载 ...

随机推荐

  1. Windows Server 2008安装IIS 7与配置

    一.安装IIS 7 1.鼠标右键[我的电脑(Computer)]→[管理(Manager)] 2.选择[角色(Roles)],右键[添加角色(Add Roles)],弹出[添加角色向导(Add Rol ...

  2. Linux SPI初始化及接口函数代码细究

    2012-01-08 22:11:38 目的:我需要掌握spi驱动相关数据结构关系,及在哪部分函数中把这些数值进行底层寄存器赋值的.结合应用层函数完成spi驱动的代码测试.已达到灵活修改的目的. 按顺 ...

  3. CCF CSP 201809-2 买菜

    题目链接:http://118.190.20.162/view.page?gpid=T78 问题描述 小H和小W来到了一条街上,两人分开买菜,他们买菜的过程可以描述为,去店里买一些菜然后去旁边的一个广 ...

  4. vue 重构项目第一步(vue-cli跟bootstrap)

    一.先安装jq跟bootstrap 1.因为bootstrap依赖jq,先安装jq----->npm install jquery@1.11.3 --save-dev   ----->可以 ...

  5. JS所包含的大纲内容,以及JS中数据类型、运算符的介绍

    JavaSctipt javascript:1.特效2.表单验证 原理:何时?1.找到标签 何时?2.操作标签 写在那里? 内联(行内)(不推荐直接写js代码,经常写方法调用) 写在标签里面,以属性的 ...

  6. java导出csv格式文件

    导出csv格式文件的本质是导出以逗号为分隔的文本数据 import java.io.BufferedWriter; import java.io.File; import java.io.FileIn ...

  7. java导出excel,多表头合并

    要求结果图如下: 有空补充具体逻辑 参考:https://blog.csdn.net/dj0721/article/details/72463042 HSSFColor  背景颜色选择  参考:htt ...

  8. Spring cloud Greenwich Eureka

    1.父工程POM文件中: <dependencyManagement> <dependencies> <!--spring cloud--> <depende ...

  9. PyGame实现情人节表白利器

    前提:写不出那么那个的话哇,随便写写,随便看看,重在代码(文章末尾有免费完整源代码) 实验环境: pygame 1.9.4 pycharm python3.6 实现思路: pygame.display ...

  10. 编译openwrt时报错:g++: internal compiler error: Killed (program cc1plus)

    答: 这是内存不足导致的,增大内存或者减少运行的线程即可