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: about 1 month 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 (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-01-07T14:06:11.000Z (almost 3 years ago)
• Last Synced: 2024-04-09T11:32:17.187Z (7 months 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

[![Build Status](https://travis-ci.org/imcuttle/react-router-ez-loader.svg?branch=master&style=flat-square)](https://travis-ci.org/imcuttle/react-router-ez-loader)

[![NPM version](https://img.shields.io/npm/v/react-router-ez-loader.svg?style=flat-square)](https://www.npmjs.com/package/react-router-ez-loader)

[![NPM Downloads](https://img.shields.io/npm/dm/react-router-ez-loader.svg?style=flat-square&maxAge=43200)](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')

      }

    }

  ]

}

```