Question

我从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但我被困了不变违规：根路由必须呈现单个元素

在这种情况下，我的代码类似于带有reducer的普通容器所以容器文件，index.js文件类似于其他容器和index.js。主要的变化是我在其中包含的所有路线的index.js，CoreLayout的index.js和尝试更改组件：CoreLayout到组件：CoreLayout（存储）但这没有用，正如我所说我坚持以前提到的错误我希望你能帮帮我：）但以防万一

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)

在这个例子中，

动作并不有趣。

UPDATE 我忘了添加创建路线代码

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

我希望somone可以帮助我。最好的祝福， Cezary

Answer 1

要做的两件事：

<强> 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

React-router Invariant Violation：根路由必须呈现单个元素

1 个答案: