使用 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

很简单把~~

转载于:https://www.cnblogs.com/jiemao/p/9670416.html

使用 dva 如何配置异步加载路由组件相关推荐

reactjs通过lazy函数配合import函数动态加载路由组件
路由组件的lazyLoad //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>i ...
div 重新加载_使用React的HOC来完成模块的异步加载
原文地址medium.com 在单页面应用的时代,你可以使用React来完成几乎所有的Web应用甚至大型的Web引用.你甚至可以使用React开发一个Facebook. 当前正如你所知,Webpac ...
java ztree 异步加载_插件使用一树形插件---zTree一zTree异步加载
zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...
Vue7 异步加载懒加载
vue开发过程中,我们会做出特别多特别多的组件,包括login,header,footer,main等等.这样使整个网站看起来就十分的庞大,当我们在打开网页的时候,突然一下子把这些所有的组件加载上来, ...
import() 动态加载component组件失败
在写 vue+element 从后台获取数据写导航栏时,当我加载动态路由,import() 总是失败. 假设 path: "@/views/Home.vue",name: &qu ...
【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由
创建一个带路由的项目,依次执行下面每行代码 ng n RouingApp --routingcd RouingAppng g c components/firstng g c components/s ...
angularjs 路由异步加载js
angularjs 异步加载js 有两种方法第一种使用$q 和 requireJS 加载这个问题首要出现在当我把require 引入项目中是,希望做到点击路由时加载相应的页面htm ...
Android-Universal-Image-Loader 图片异步加载类库的使用（超详细配置）
UIL( Android-Universal-Image-Loader 图片异步加载类库的使用(超详细配置)) http://blog.csdn.net/vipzjyno1/article/detai ...
ztree配置async异步加载子节点，展开不触发请求的问题解决记录
普通渲染方式如果是数据量不大,普通加载,按照ztree的数据格式,直接渲染就行 //这是我自己使用的数据格式 var zNodes = [{childs: [{ directory: false, ...
JQuery Datatables 动态配置参数异步加载数据
背景需求在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明直接上代码 var table; var url = ...

使用 dva 如何配置异步加载路由组件

来源：https://www.jianshu.com/p/69694013e36b
-----------------------------------------------------

普通方式文件目录：src/route.js

1. 使用异步路由加载组件在文件头部引入

使用 dva 如何配置异步加载路由组件相关推荐

最新文章

热门文章

使用 dva 如何配置异步加载路由组件

来源：https://www.jianshu.com/p/69694013e36b -----------------------------------------------------

普通方式 文件目录：src/route.js

1. 使用异步路由加载组件 在文件头部引入

使用 dva 如何配置异步加载路由组件相关推荐

最新文章

热门文章

来源：https://www.jianshu.com/p/69694013e36b
-----------------------------------------------------

普通方式文件目录：src/route.js

1. 使用异步路由加载组件在文件头部引入