Skip to content

Instantly share code, notes, and snippets.

@rowlandekemezie
Forked from acdlite/app.js
Created October 23, 2017 11:44
Show Gist options
  • Save rowlandekemezie/4ab0eab32bfa5eb66ece2437967731ed to your computer and use it in GitHub Desktop.
Save rowlandekemezie/4ab0eab32bfa5eb66ece2437967731ed to your computer and use it in GitHub Desktop.
Quick and dirty code splitting with React Router v4
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
AsyncComponent.Component = Component
this.setState({ Component })
})
}
}
render() {
const { Component } = this.state
if (Component) {
return <Component {...this.props} />
}
return null
}
}
}
const Foo = asyncComponent(() =>
System.import('./Foo').then(module => module.default)
)
const Bar = asyncComponent(() =>
System.import('./Bar').then(module => module.default)
)
const App = () =>
<BrowserRouter>
<Link to="/foo">Foo</Link>
<Link to="/bar">Bar</Link>
<Match pattern="/foo" component={Foo} />
<Match pattern="/bar" component={Bar} />
</BrowserRouter>
export default App
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment