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

编辑

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

作为参考，我正在使用并尝试向我的路由添加一个简单的包装器组件，如下所示：

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

所以基本上，如果我在一条儿童路线中嵌套儿童路线，我会收到关于失踪儿童的投诉

以下是完整的设置：

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
  )
}

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

类AppContainer扩展组件{
静态类型={
历史记录：PropTypes.object.isRequired，
路由：PropTypes.object.isRequired，
存储：PropTypes.object.isRequired
}
渲染（）{
const{history，routes，store}=this.props
返回(
)
}
}
导出默认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

从“React”导入React
从“../../components/Header”导入标题
从“./CoreLayout.scss”导入类
导入“../styles/core.scss”
导出常量CoreLayout=（{children}）=>(
{儿童}
)
CoreLayout.propTypes={
子项：React.PropTypes.element.isRequired
}
导出默认CoreLayout

TransitionWrappper.js( {this.props.children} ) 导出默认TransitionWrapper

---

NestedChild.js您是否尝试过从

CoreLayout

的

children

道具中删除

isRequired

---

如果您正在动态加载子组件，则会有一段时间，

CoreLayout

会在您将子组件放入其中之前呈现。

尝试此操作时，哪个组件会给您带来错误？因为CoreLayout不会再出现错误了…所以经过几次检查，我很确定不是这样，你可以看到我的最新编辑。重点当然不是对道具的抱怨，而是没有呈现子路由的事实。请尝试使用“导出默认组件”可能会解决你的问题。

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

const TransitionWrapper = (props) => (

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

  </div>
)

export default TransitionWrapper