javascript - 在另一个子路由中嵌套子路由

Question

编辑

我最初的问题包括带有分割点的路线，但我已将其简化为最简单的用例，即仅将子路线相互嵌套。

作为引用，我正在使用 the popular 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
      ]
  }]
})

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

TransitionWrapper.js <--- 未呈现

const TransitionWrapper = (props) => (

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

  </div>
)

export default TransitionWrapper

NestedChild.js <--- 未呈现

Answer 1

您是否尝试过从 CoreLayout 的 children 属性中删除 isRequired？

如果您动态加载您的子组件，在您将子组件放入其中之前，CoreLayout 将有一段时间呈现。