React-router Invariant Violation: The root route must render a single element

Question

I done tutorial from reactjs.co related to add session props to my app. I am using https://github.com/davezuko/react-redux-starter-kit. Now I am still developing my app and I have new requirements. What I want to do is to pass props from my CoreLayout to for example Nav or Main Conatainer when state of session will change. The problem is that I can't see session props in CoreLayout so I can't sent it. Let's say that's my code of CoreLayout.js

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

I want to do in correct way. What I tried to do is to create CoreLayoutContainer but I am stucked with Invariant Violation: The root route must render a single element

In this situation my code is similar to normal Containers with reducers so container file, index.js file is similar to others container and index.js. Main changes is in index.js of all routes I included there index.js of CoreLayout and try change component: CoreLayout to component: CoreLayout(store) but this no works and as I said I stucked with previously mentioned error I hope you can help me :) But just in case

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

container

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)

actions is not interesting in this example.

UPDATE i forgot to add create routes code

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

I hope somone can help me. Best Regards, Cezary

I don't think you need the trailing .default in this statement const CoreLayout = require('./container/CoreLayoutContainer').default as there is only one single default export from container. — yadhu
When i use only CoreLayout without container i see object with properties: children, history, location, params, route, routeParams, routes. If I use container and store i have error - sorry is the props console.log if you mean console.log(CoreLayout) this shows me function CoreLayout(props) { (0, classCallCheck3.default)(this, CoreLayout); var _this = (0, _possibleConstructorReturn3.default)(this, (CoreLayout.__proto_ || (0, _getPrototypeOf2.defau… — czarek19937
could you share the output of console.log(require('./container/CoreLayoutContainer')) inside require.ensure? — yadhu

yadhu yadhu · Accepted Answer · 2016-12-03T14:54:35

Two things to do:

CoreLayout.js

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

routes/index.js

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

and

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

React-router Invariant Violation: The root route must render a single element

1 Answers