React-router Invariant Violation : 루트 경로는 단일 요소를 렌더링해야합니다.

내 앱에 세션 소품을 추가하는 것과 관련된 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를 만드는 것이지만 Invariant Violation에 갇혀 있습니다. 루트 경로는 단일 요소를 렌더링해야합니다.

이 상황에서 내 코드는 감속기가있는 일반 컨테이너와 유사하므로 컨테이너 파일, index.js 파일은 다른 컨테이너 및 index.js와 유사합니다. 주요 변경 사항은 CoreLayout의 index.js를 포함하고 구성 요소를 변경하려고 시도하는 모든 경로의 index.js에 있습니다. 나 :)하지만 만약에

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

누군가가 나를 도울 수 있기를 바랍니다. 감사합니다, Cezary