Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imcuttle/react-router-ez-loader
react-router-ez-loader
https://github.com/imcuttle/react-router-ez-loader
react-router react-router-ez-loader react-router-v3 webpack-loader
Last synced: 20 days ago
JSON representation
react-router-ez-loader
- Host: GitHub
- URL: https://github.com/imcuttle/react-router-ez-loader
- Owner: imcuttle
- License: mit
- Created: 2018-01-04T08:51:02.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-01-07T14:06:11.000Z (about 3 years ago)
- Last Synced: 2025-01-07T21:14:26.351Z (about 1 month ago)
- Topics: react-router, react-router-ez-loader, react-router-v3, webpack-loader
- Language: JavaScript
- Size: 43.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: Readme.md
- License: License
Awesome Lists containing this project
README
# react-router-ez-loader
[](https://travis-ci.org/imcuttle/react-router-ez-loader)
[](https://www.npmjs.com/package/react-router-ez-loader)
[](https://www.npmjs.com/package/react-router-ez-loader)Make your application's react routes code is more ez! :smile:
- Easy to write your routes.js
- Easy to append chunkname for webpack code splitting## routes.js
```javascript
module.exports = {
path: '/',
component: 'sync!@fe/comps/Layout',
indexRoute: {
component: '@fe/pages/Home'
},
childRoutes: [
{
path: 'edit',
component: '!some-loader!@fe/pages/Edit?n=ABC'
}
]
}
```## Usage
```javascript
const routes = require('react-router-ez-loader!./routes')
```## Output
```javascript
module.exports = {
path: '/',
component: require('@fe/comps/Layout').default || require('@fe/comps/Layout'),
indexRoute: {
getComponent: function(location, callback) {
require.ensure([], function() {
callback(null, require('@fe/pages/Home') || require('@fe/pages/Home').default)
}, '@fe/pages/Home')
}
},
childRoutes: [
{
path: 'edit',
getComponent: function(location, callback) {
require.ensure([], function() {
callback(null, require('!some-loader!@fe/pages/Edit') || require('!some-loader!@fe/pages/Edit').default)
}, 'ABC')
}
}
]
}
```