使用 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 这个图片异步加载 ...
随机推荐
- 安卓 ToolBar 颜色样式设置
设置Toolbar弹出菜单的字体颜色和背景颜色,包括三个点菜单颜色和返回图标的颜色. 布局文件xml <LinearLayout xmlns:android="http://schem ...
- office 2016 官方原版 (含Visio Project 等全套 )下载地址 (不含破解,非网盘下载)不用登录
原文地址:https://www.heidoc.net/joomla/technology-science/microsoft/8-office-2016-direct-download-links ...
- 关于Oracle配置一些需要注意地方(IIS相关)
说明:多重复,把各种坑走一次,并知道如何不走坑或者把坑填满,然后再复盘重新走一次,另外,你必须比一般人多付出一些,因为你起步慢了,另 外,你白天的效率不算高,精神状态不好,“试用期”就意味着有淘汰的可 ...
- linux查看服务器并发连接数
netstat -n | awk '/^tcp/ {++S[$NF]} END {for(key in S) print key,"\t",S[key]}'
- 详解Bootstrap实现基本布局的方法
看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用bootstrap教程实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面我们先创建一个基本的 HTML 模板 ...
- Manjaro 安装svn客户端,以及checkout使用命令
安装svn sudo pacman -S svn checkout操作指令 svn co http://xxxxxxx /home/xx update 更新版本 svn up [文件/目录] 直接使用 ...
- 解决 ImportError: No module named _internal
参考: My pip is broken. _internal module cannot be imported. #5253 解决 ImportError: No module named _in ...
- 基于create-react-app的打包后文件路径问题
改绝对路径为相对路径. https://segmentfault.com/q/1010000009672497直接在package.json里加 "homepage":" ...
- OpenVPN部署,实现访问云服务器的内网
本教程不描述如何FQ 一.OpenVPN服务端部署 $ yum -y install net-tools lzo lzo-devel openssl-devel pam-devel gcc gcc-c ...
- css复合选择器的权重
选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...