react-dynamic-router-loader v1.0.9

1. setup

    npm i --save-dev react-dynamic-router-loader

2. using

    // webpack.config-client.js
    ...
    loader: "react-dynamic-router-loader",
    options: {
        // Loading Component
        asyncDefaultComponent: './components/loading.jsx'
    }
    ...

    // ./components/loading.jsx
    import React from 'react';

    const _AsyncComponent = (
                loaderComponent, 
                loadingComponent, 
                cacheComponent
    ) => (
        class _AsyncComponent extends React.Component {
            state = {
                Component: null
            }

            async componentWillMount() {
                let Component = cacheComponent || await loaderComponent();

                this.setState({
                    Component
                });
            }

            render() {
                const { Component } = this.state;

                return (Component) ? 
                            <Component {...this.props} /> : 
                            loadingComponent();
            }
        }
    );

    // Currently only to do so
    module.exports = _AsyncComponent;

    // Reactjs Code
    ...
    <MyComponent component={require(
                                /* webpackChunkName: "index" */
                                /* loadingComponentPath: "./loading.jsx" */
                                'path/my-component.jsx')} />
    ...
    // webpackChunkName
    // the "import" feature of the CommonJS API for webpack2

    /* 
       loadingComponentPath is the loader's property 
       that specifies the corresponding loadingComponent 
       for this component by configuring 
       this property or the default asyncDefaultComponent   
       ps: Path is relativePath, equal "require('[path]') "  
    */

    // Reactjs Code 2
    class MyComponent extends React.Component {
        preRender(){
            // Don't use props. 
            // because this.props not equal MyComponent's props

            return (
                <div>My Loading View</div>
            );
        }
    }

3. Webpack.config.js info

    // webpack config must has client and server config

    let clientConfig = {
        ...
        // client config
        ...
    };

    let serverConfig = {
        ...
        // server config
        ...
    };

    module.exports = [serverConfig, clientConfig]

4.supplement(PS) [[[[ author's english is bad :(

The following instructions assume you need server-side rendering

Based on server-side rendering, js needs to write

<script src = "./path/bundle.js"></script>

directly in html at initialization. And ReactDOM.render function needs to go through

setTimeout (function () {
      RenderDOM.render (xxxx)
});

Delayed execution. (Otherwise webpack2 will re-load bundle.js)

BTW: server-side rendering does not need to import the loader, because the loader is designed to allow webpack.config-server.js can be packaged into a js together.