javascript - React-router不变违反:根路由必须呈现单个元素

我从reactjs.co完成了与向我的应用添加会话道具有关的教程。我正在使用https://github.com/davezuko/react-redux-starter-kit。现在，我仍在开发我的应用程序，并且有新的要求。我想做的是，当会话状态改变时，将道具从我的CoreLayout传递给Nav或Main Conatainer。问题是我在CoreLayout中看不到会话道具，因此无法发送。假设这是我的CoreLayout.js代码

class CoreLayout extends Component = {
    return (
        <div className='container text-center'>
            <Nav />
            <Main />
            <div className={classes.mainContainer}>
                {this.props.children}
            </div>
        </div>
    )
}

我想以正确的方式做。
我试图做的是创建CoreLayoutContainer，但是我一直坚持
不变违反：根路径必须呈现单个元素

在这种情况下，我的代码类似于带有减速器的普通容器
因此容器文件，index.js文件与其他容器和index.js类似。主要更改是在所有路由的index.js中添加了CoreLayout的index.js，然后尝试将组件：CoreLayout更改为组件：CoreLayout（store），但这没有用，正如我所说的，我坚持前面提到的错误
我希望你可以帮助我 ：）
但以防万一

index.js

import { injectReducer } from '../../store/reducers'

export default (store) => ({
  path: 'CoreLayout',
  /*  Async getComponent is only invoked when route matches   */
  getComponent (nextState, cb) {
    /*  Webpack - use 'require.ensure' to create a split point
        and embed an async module loader (jsonp) when bundling   */
    require.ensure([], (require) => {
      /*  Webpack - use require callback to define
          dependencies for bundling   */
      const CoreLayout = require('./container/CoreLayoutContainer').default
      const reducer = require('./modules/corelayout').default

  /*  Add the reducer to the store on key 'about'  */
  injectReducer(store, { key: 'CoreLayout', reducer })

  /*  Return getComponent   */
  cb(null, CoreLayout)

/* Webpack named bundle   */
}, 'CoreLayout')
}})

容器

import React from 'react'
import { connect } from 'react-redux'
import { increment, doubleAsync } from '../modules/corelayout'

import CoreLayout from '../CoreLayout'

const mapActionCreators = {
  increment: () => increment(1),
  doubleAsync
}

const mapStateToProps = (state) => ({
  core: state.core,
  session: state.session
})


class CoreLayoutContainer extends React.Component {
  constructor(props) {
    super(props)
    console.log("corelayout")
    console.log(this.props)
    // console.log(props)
    console.log(this.props.router)
    console.log(this.props.session)
  }

  componentWillReceiveProps(nextProps) {
    console.log("get the new props")
    console.log(this.props)
  }

  render() {
    return (
      <CoreLayout />
    )
  }
}


export default connect(mapStateToProps, mapActionCreators)(CoreLayoutContainer)

在此示例中，动作并不有趣。

更新
我忘记添加创建路线代码

import CoreLayout from '../layouts/CoreLayout/index'
import Home from './Home'
import CounterRoute from './Counter'
import DashboardRoute from './Dashboard'
import AboutRoute from './About'
import ContactRoute from './Contact'
import PartnersRoute from './Partners'
import LoginRoute from './Login'
import RegisterRoute from './Register'



export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayout(store),
  indexRoute: Home,
  childRoutes: [
    CounterRoute(store),
    DashboardRoute(store),
    AboutRoute(store),
    ContactRoute(store),
    PartnersRoute(store),
    LoginRoute(store),
    RegisterRoute(store)
  ]
})

我希望有人能帮助我。
最好的祝福，
塞扎里

最佳答案

有两件事要做：

CoreLayout.js

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

路线/index.js

import CoreLayoutContainer from '../layouts/CoreLayout/container/CoreLayoutContainer'

和

export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayoutContainer,
  // ... rest of the things