リアクタ・ルータ不変違反：ルート・ルートは単一の要素をレンダリングする必要があります

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を作成することですが、私は 不変違反でstucked午前：ルートルートは私のコードは、減速 ので、コンテナファイル、インデックスを持つ通常のコンテナに似ている。このような状況では、単一の要素

をレンダリングする必要があります。 jsファイルは、他のコンテナやindex.jsに似ています。主な変更点はCoreLayoutのindex.jsに含まれているすべてのルートの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) 

アクションこの例では興味深いものではありません。

UPDATE 私はSomoneのは、私を助けることを願ってルートコード

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

Answer 1

行うには2つのこと：

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