将子路由嵌套在另一个子路由中

>编辑

我的初始问题包括具有拆分点的路由，但我已将其简化为最简单的用例，即仅将子路由嵌套在彼此之下。

作为参考，我正在使用流行的 react-redux-starter-kit，我正在尝试将一个简单的包装器组件添加到我的路由中，如下所示：

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

但是我收到以下错误，并且我的子路由未呈现：

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

所以基本上，如果我在子路线中嵌套子路由，我会收到关于丢失孩子的投诉。

以下是完整设置：

主.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
      ]
  }]
})

应用容器.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

核心布局.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 <--- 未呈现

const TransitionWrapper = (props) => (
  <div className="im-not-working">
    {this.props.children}
  </div>
)
export default TransitionWrapper

嵌套子.js <---未呈现