Nesting child routes within another child route

Question

EDIT

My Initial question included routes with split points, but I've reduced it to the most simple use case of just nesting child routes under each other.

For reference I'm using the popular react-redux-starter-kit and I'm trying to add a simple wrapper component to my routes like so:

export const createRoutes = (store) => ({
      path: '/',
      component: CoreLayout,
      indexRoute: Home,
      childRoutes: [{
        component: TransitionWrapper,
        childRoutes: [
          CounterRoute(store)
          ]
      }]
    })

but I get the following error and my child routes aren't being rendered:

Warning: Failed prop type: Required prop `children` was not specified in `CoreLayout`.
    in CoreLayout (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by AppContainer)
    in div (created by AppContainer)
    in Provider (created by AppContainer)
    in AppContainer

So basically if I nest child routes in a child route I get a complaint about missing children.

Here is the full setup:

main.js

const MOUNT_NODE = document.getElementById('root')

let render = () => {
  const routes = require('./routes/index').default(store)

  ReactDOM.render(
    <AppContainer
      store={store}
      history={history}
      routes={routes}
    />,
    MOUNT_NODE
  )
}

/routes/index.js

import CoreLayout from '../layouts/CoreLayout/CoreLayout'
import Home from './Home'
import NestedChild from './NestedChild'
import TransitionWrapper from './TransitionWrapper'

export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayout,
  indexRoute: Home,
  childRoutes: [{
    component: TransitionWrapper,
    childRoutes: [
      NestedChild
      ]
  }]
})

AppContainer.js

class AppContainer extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    routes: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
  }

  render () {
    const { history, routes, store } = this.props

    return (
      <Provider store={store}>
        <div style={{ height: '100%' }}>
          <Router history={history} children={routes} />
        </div>
      </Provider>
    )
  }
}

export default AppContainer

CoreLayout.js

import React from 'react'
import Header from '../../components/Header'
import classes from './CoreLayout.scss'
import '../../styles/core.scss'

export const CoreLayout = ({ children }) => (
  <div className='container text-center'>
    <Header />
    <div className={classes.mainContainer}>
      {children}
    </div>
  </div>
)

CoreLayout.propTypes = {
  children: React.PropTypes.element.isRequired
}

export default CoreLayout

TransitionWrappper.js <--- IS NOT RENDERING

const TransitionWrapper = (props) => (

  <div className="im-not-working">
    {this.props.children}

  </div>
)

export default TransitionWrapper

NestedChild.js <--- IS NOT RENDERING

Answer 1

Have you tried just removing isRequired from the children prop of CoreLayout?

If you are loading your child components dynamically, there will be a period of time where the CoreLayout renders before you've got child components to put in it.