React-router-loader NPM

react-router-loader

Based on react-router-proxy-loader and react-proxy-loader, adapted for react-router route handlers.

Installation

npm install react-router-loader --save-dev

Dependencies

Which version to use depends on your version of react-router

react-router	react-router-loader
1.x	0.4.x
2.x and above	0.5.x

Usage

Documentation: Using loaders

Use when requiring the component for a Route, and the component will only be loaded when the route is rendered.

<Route component={require('react-router!./Component')} />

Named chunks

You can give the chunk a name with the name query parameter:

<Route component={require('react-router?name=chunkName!./Component')} />

Named chunks with placeholders (0.5.1 and above)

You can also use the standard Webpack placeholders in the name of your chunks.

<Route path="details" component={require('react-router-proxy?name=[name]!./UserDetails.jsx')}>
<Route path="settings" component={require('react-router-proxy?name=[name]!./UserSettings.jsx')}>
<Route path="other" component={require('react-router-proxy?name=[name]!./UserOther.jsx')}>

Would generate three chunks, exported in userdetails.js, usersettings.js and so on. Using this approach allows you to setup your loader globally through an exclude/include rule in your webpack.config.js. To avoid conflicts it may be best to prefix your name with a subfolder name, such as routes/:

loaders: [
    {
        test: /\.js$/,
        exclude: /src\/Pages/,
        loader: 'babel',
    },
    {
        test: /\.js$/,
        include: /src\/Pages/,
        loaders: ['react-router-proxy?name=routes/[name]', 'babel'],
    }
],

This has the advantage of making your router a lot leaner:

<Route path="details" component={require('./UserDetails.jsx')}>
<Route path="settings" component={require('./UserSettings.jsx')}>
<Route path="other" component={require('./UserOther.jsx')}>

The generated files would then go into routes/userdetails, routes/usersettings etc.