使用 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 这个图片异步加载 ...
随机推荐
- CSS图形
1.正方形 最终效果: CSS代码如下: #square { width: 100px; height: 100px; background: red; } 2.长方形 最终效果: CS ...
- PAT (Basic Level) Practice (中文)1004 成绩排名 (20 分)
题目链接:https://pintia.cn/problem-sets/994805260223102976/problems/994805321640296448 #include <iost ...
- Net Core API网关Ocelot
Ocelot在github的地址 https://github.com/TomPallister/Ocelot , 非常给力的是在课程当天完成了.NET Core 2.0的升级,升级过程请看https ...
- Spring:容器基本用法
bean是Spring 最核心的东西,打个比方,假设Spring是一个水桶,那么bean就是水桶里的水,水桶离开水后,就没啥作用了.我们先来看一下bean的定义: public class Perso ...
- Spark大型电商项目实战-及其改良(2) RDD优化效果不稳定的真正原因
首先看没有map join的第2任务: 时间线如下 接着是对应id的算子计算时间表 Stage Id Description Submitted Duration Tasks: Succeeded/T ...
- varnish 测试
安装 通过epel 源 yum 安装 [root@localhost varnish]# rpm -ql varnish /etc/logrotate.d/varnish /etc/varnish / ...
- Android中获得网络状况的实现
要得知网络状况就是要用networkinfo类这个类名还是把这个类的意思表达的很清晰的,network是网络,info是状况.判断是否有网用到了这个类的IsAvailable方法,这个方法返回的是这个 ...
- 王之泰201771010131《面向对象程序设计(java)》第十四周学习总结
第一部分:理论知识学习部分 第12章 Swing用户界面组件 12.1.Swing和MVC设计模式 a 设计模式初识b 模型—视图—控制器模式c Swing组件的模型—视图—控制器分析 12.2布局管 ...
- 论文笔记:Progressive Neural Architecture Search
Progressive Neural Architecture Search 2019-03-18 20:28:13 Paper:http://openaccess.thecvf.com/conten ...
- 代码生成器——实现生成pojo,sql,mapper接口
代码生成器(记录一次兴趣代码,多多指教.转载请标明作者) 在我们开始实现代码生成器之前我们先来对代码生成器有一个简单的了解. 1.什么是代码生成器? 故名思义,也就是生成代码的一个程序.那它是一个什么 ...