reactrouter4按需加载

yarn add react-loadable -S

// routerMap.jsx 路由表组件

import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';

const LoadingComponent = ({isLoading, error}) => {
  if (isLoading) {
    return <div>Loading...</div>;
  } else if (error) {
    return <div>Sorry, there was a problem loading the page.</div>;
  } else {
    return null;
  }
};

// 首页
const App = Loadable({loader: () => import('../component/App'), loading: LoadingComponent});

export default class RouteMap extends React.Component {
  render () {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={App} />
        </Switch>
      </Router>
    );
  }
};

// index.js 入口页面

import React from 'react';
import ReactDOM from 'react-dom';
import RouterMap from './router/routerMap';

ReactDOM.render(<RouterMap />, document.getElementById('app'));

// routerBundle.jsx Bundle高阶组件

import React from 'react';

export default class Bundle extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      mod: null
    };
  }

  componentWillMount () {
    this.load(this.props);
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps);
    }
  }

  load (props) {
    this.setState({
      mod: null
    });

    // 注意这里，使用Promise对象; mod.default导出默认
    props.load().then((mod) => {
      this.setState({
        mod: mod.default ? mod.default : mod
      });
    });
  }

  render () {
    return this.state.mod ? this.props.children(this.state.mod) : null;
  }
}

// routerMap.jsx 路由表

import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Bundle from './routerBundle';

// 首页组件
const App = (props) => <Bundle load={() => import('../component/App')}>{(Chat) => <Chat {...props}/>}</Bundle>;

export default class RouteMap extends React.Component {
  render () {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={App} />
        </Switch>
      </Router>
    );
  }
};