react-router实现按需加载
本文使用的 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") }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- React router+ webpack实现JS按需加载
- webpack+react-router实现代码拆分按需加载(下)
- react-router4 实现按需加载并利用withRouter传递props
- React-router中结合webpack实现按需加载实例
- React-router 4 按需加载的实现方式及原理详解
- [置顶] React-router-v4 - Webpack 实现按需加载(code-splitting)
- 详解react-router如何实现按需加载
- React-router4 使用bundle-loader实现按需加载(code-splitting)
- react-router4 实现按需加载
- [转] react-router4 实现按需加载
- webpack+react-router实现代码拆分按需加载(上)
- 4000 react-router实现按需加载
- react结合redux和react-router开发大型应用实现按需加载(code splitting)
- React-router中,结合webpack实现按需加载
- 详解webpack + react + react-router 如何实现懒加载
- react-router4 配合webpack require.ensure 实现异步加载的示例
- React配合Webpack实现代码分割与异步加载
- React-native IT喵~ ScrollView 嵌套ListView 如何实现上拉加载、下拉刷新
- vue+vue-router+vuex,利用vue-router2.2.0新增特性addRoutes实现路由动态加载,菜单动态加载,运用于后台管理系统,路由数据取自数据库
- 基于 Webpack 2 的 React Router 懒加载路由配置