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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
JavaScript中的闭包
Feb 24 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 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数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
python 安装impala包步骤
2020/03/28 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
python实现网页录音效果
2020/10/26 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
教师岗位职责
2013/11/17 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
创业计划书六个要素
2013/12/26 职场文书
家长对孩子评语
2014/01/30 职场文书
会计助理岗位职责
2014/02/17 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL