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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
jquery 选择器部分整理
Oct 28 Javascript
js快速排序的实现代码
Dec 08 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 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
一个目录遍历函数
2006/10/09 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
python简单实现计算过期时间的方法
2015/06/09 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
就业自荐书
2013/12/05 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
公司门卫岗位职责
2014/03/15 职场文书
学校工作推荐信范文
2014/07/11 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
2014年底个人工作总结
2015/03/10 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
修辞手法有哪些?
2019/08/29 职场文书
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis