react-router实现按需加载


Posted in Javascript onMay 09, 2017

本文使用的 React-router 版本为 2.8.1

React Router自己就有一套按需加载解决方案,将代码拆分成多个小包,在浏览过程中实现按需加载;

如过你的项目搭配了webpack打包工具,那么需要在webpack.config.js的output内加上chunkFilename

output: {
  path: path.join(__dirname, '/../dist/assets'),
  filename: 'app.js',
  publicPath: defaultSettings.publicPath,
  // 添加 chunkFilename
  chunkFilename: '[name].[chunkhash:5].chunk.js',
},

name是代码里创建chunk指定的名字,如果代码中没有指定,则webpack会默认分配id号码作为name;

chunkhash是文件的hash码,因为hash码比较长,所以这里只取前五位。

我们需要让路由动态加载组件,需要将 component 换成 getComponent。首先将路由拆出来,创建一个根路由 rootRoute:

const rootRoute = {
 path: '/',
 indexRoute: {
  getComponent(nextState, cb) {
   require.ensure([], (require) => {
    cb(null, require('components/layer/HomePage'))
   }, 'HomePage')
  },
 },
 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/Main'))
  }, 'Main')
 },
 childRoutes: [
  require('./routes/baidu'),
  require('./routes/404'),
  require('./routes/redirect')
 ]
}

ReactDOM.render(
 (
  <Router
   history={browserHistory}
   routes={rootRoute}
   />
 ), document.getElementById('root')
);

这里有四个属性:

path

不用多说,匹配路由;

getComponent

对应于以前的 component 属性,但是这个方法是异步的,也就是当路由匹配时,才会调用这个方法。

这里面有个 require.ensure 方法

require.ensure(dependencies, callback, chunkName)

这是 webpack 提供的方法,这也是按需加载的核心方法。第一个参数是依赖,第二个是回调函数,第三个就是上面提到的 chunkName,用来指定这个 chunk file 的 name。

indexRoute

用来设置主页。(单独抽离主页)

注意这里的 indexRoute 写法, 这是个对象,在对象里面使用 getComponent。

childRoutes

子路由

这里面放置的就是子路由的配置,对应于以前的子路由们。我们将以前的 /baidu、/404 和 * 都拆了出来,接下来将分别为他们创建路由配置。

路由控制

上面的childRoutes 里面,我们 require 了三个子路由,在目录下创建 routes 目录,将这三个路由放置进去。

routes/
├── 404
│  └── index.js
├── baidu
│  ├── index.js
│  └── routes
│    ├── frequency
│    │  └── index.js
│    └── result
│      └── index.js
└── redirect
  └── index.js

和 rootRoute 类似,里面的每个 index.js 都是一个路由对象:

/404/index.js

module.exports = {
 path: '404',

 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/layer/NotFoundPage'))
  }, 'NotFoundPage')
 }
}

/baidu/index.js

module.exports = {
 path: 'baidu',

 getChildRoutes(partialNextState, cb) {
  require.ensure([], (require) => {
   cb(null, [
    require('./routes/result'),
    require('./routes/frequency')
   ])
  })
 },

 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/layer/BaiduPage'))
  }, 'BaiduPage')
 }
}

/baidu/routes/frequency/index.js

module.exports = {
 path: 'frequency',
 getComponent(nextState, cb) {
  require.ensure([], (require) => {
   cb(null, require('components/layer/BaiduFrequencyPage'))
  }, 'BaiduFrequencyPage')
 }
}

等················

下面来说一下设置Redirect

我们需要把这个重定向的路由单独拆出来,也就是 * 这个路由,我们上面已经为他创建了一个 redirect 目录。这里使用到 onEnter 方法,然后在这个方法里改变路由状态,调到另外的路由,实现 redirect :

/redirect/index.js官方例子

module.exports = {
 path: '*',
 onEnter: (_, replaceState) => replaceState(null, "/404")
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.compatMode介绍
May 21 Javascript
js查错流程归纳
May 04 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
BootStrap表单时间选择器详解
May 09 #Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 #Javascript
JS触摸与手势事件详解
May 09 #Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 #Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 #Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 #Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
You might like
php发送http请求的常用方法分析
2016/11/08 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
python 实现对文件夹内的文件排序编号
2018/04/12 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
投资意向协议书
2015/01/29 职场文书
项目合作意向书
2015/05/08 职场文书
会议主持人开场白台词
2015/05/28 职场文书
团组织推荐意见
2015/06/05 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
初中生物教学反思
2016/02/20 职场文书
小学语文教学反思范文
2016/03/03 职场文书