1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// AsyncRoute.jsx
import React, { Component } from 'react'

class Bundle extends Component {
  constructur() {
    super()
    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,
    })
    props.load((mod) => {
      this.setState({
        mod: mod.default || mod,
      })
    })
  }
  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null
  }
}

export default (module) => (routerProps) => (
  <Bundle load={module}>{(Comp) => (Comp ? <Comp {...routerProps} /> : null)}</Bundle>
)
1
2
3
4
5
6
// Body.jsx
import { Route } from 'react-router-dom'
import AsyncRoute from './AsyncRoute'
import Page from 'bundle-loader?lazy!./Page'

;<Route component={AsyncRoute(Page)} />