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
Use when requiring the component
for a Route
, and the component will only be loaded when the route is rendered.
<Route component= />
Named chunks
You can give the chunk a name with the name
query parameter:
<Route 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=><Route path="settings" component=><Route path="other" component=>
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=><Route path="settings" component=><Route path="other" component=>
The generated files would then go into routes/userdetails
, routes/usersettings
etc.
Changelog
0.5.4
- Added named chunks with placeholders
0.5.0
- Upgraded to react-router 2.x
License
MIT (http://www.opensource.org/licenses/mit-license.php)