react-bundle-router v1.0.1
##Motivation
When you create React project and use Webpack as module bundler, you can face with an issue that different project routes pack to the same file. Using webpack bundle-loader doesn't solve this issue.
##What is this?
Module extend React Route and create abbility to load bundles only when route should be rendered.
Module install
npm -i react-bundle-router
\
yarn add react-bundle-router
##How to use
All files that will be splitted to bundles should be placed on the same directory (ex. /routes/
)
Setup webpack config, to create bundles (https://github.com/webpack-contrib/bundle-loader)
Instead of using Route (react-router)
component import 'react-bundle-router'
// index.jsx
import React from 'react';
import {Router, Switch, Redirect} from 'react-router';
import {createBrowserHistory} from 'history';
import BundleRoute from 'react-bundle-router'
export default class Root extends React.Component {
render() {
return (
<Router history={createBrowserHistory()}>
<Switch>
<BundleRoute path="/about" file="about" />
<BundleRoute path="/" file="home" />
</Switch>
</Router>
);
}
}
BundleRoute should be declared with file
property. This is string property that should contain component filename. This file will be loaded when path
will be match to location.pathname
##Module setup
You should specify Route Loader function
import {defineLoader} from 'react-bundle-router'
defineLoader((name, cb) => {
require('./routes/' + name + '.jsx')(cb);
});
Copy-paste loader above to your project with updated path. Important: Do not change require
argument format. It should be string(path) + variable(filename) + string(ext).
##Example of usage
https://github.com/sirJeo/react-bundle-router/tree/master/example