Based on react-router-proxy-loader and react-proxy-loader, adapted for react-router route handlers.
npm install react-router-loader --save-dev
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 |
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')} />
You can give the chunk a name with the name
query parameter:
<Route component={require('react-router?name=chunkName!./Component')} />
import ReactRouterLoader from 'react-router-loader';
ReactRouterLoader.setDefaultQueryName('[path][name]xyz');
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.