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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 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
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php实现记事本案例
2020/10/20 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
微信小程序实现跑马灯效果
2020/10/21 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python 类详解及简单实例
2017/03/24 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python画图高斯分布的示例
2019/07/10 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
PyQt5实现画布小程序
2020/05/30 Python
python如何使用腾讯云发送短信
2020/09/17 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
英文商务邀请信
2014/01/22 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
三严三实对照检查材料
2014/08/25 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
怎样写好工作计划
2019/04/10 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫