import React from 'react' import dynamic from 'next/dynamic' import Router from 'next/router' import PropTypes from 'prop-types' const HelloBundle = dynamic({ modules: (props) => { const components = { HelloContext: import('../../components/hello-context'), Hello1: import('../../components/hello1') } if (props.showMore) { components.Hello2 = import('../../components/hello2') } return components }, render: (props, { HelloContext, Hello1, Hello2 }) => (

{props.title}

{Hello2? : null}
) }) export default class Bundle extends React.Component { static getInitialProps ({ query }) { return { showMore: Boolean(query.showMore) } } static childContextTypes = { data: PropTypes.object } getChildContext () { return { data: { title: 'ZEIT Rocks' } } } toggleShowMore () { if (this.props.showMore) { Router.push('/dynamic/bundle') return } Router.push('/dynamic/bundle?showMore=1') } render () { const { showMore } = this.props return (
) } }