javascript - React-router 不变违规 : The root route must render a single element

Question

我完成了 reactjs.co 中与将 session Prop 添加到我的应用程序相关的教程。我正在使用 https://github.com/davezuko/react-redux-starter-kit .现在我仍在开发我的应用程序并且我有新的要求。我想要做的是在 session 状态发生变化时将 Prop 从我的 CoreLayout 传递到例如 Nav 或 Main Conatainer。问题是我在 CoreLayout 中看不到 session Prop ，所以我无法发送它。假设这是我的 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 并尝试将 component: CoreLayout 更改为 component: CoreLayout(store) 但这不起作用，正如我所说，我遇到了前面提到的错误我希望你可以帮助我 :)但以防万一

索引.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)

actions 在这个例子中并不有趣。

更新我忘了添加创建路由代码

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

希望有人能帮帮我。此致，塞扎里

Answer 1

要做的两件事:

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

从“../layouts/CoreLayout/container/CoreLayoutContainer”导入 CoreLayoutContainer

和

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