ネスト子ルートが

Question

EDIT

は私の最初の質問は、スプリットポイントとルートを含め、私はちょうど互いの下の子ルートをネストの最も簡単なユースケースにそれを削減しました。

export const createRoutes = (store) => ({ 
     path: '/', 
     component: CoreLayout, 
     indexRoute: Home, 
     childRoutes: [{ 
     component: TransitionWrapper, 
     childRoutes: [ 
      CounterRoute(store) 
      ] 
     }] 
    }) 

が、私は次のエラーを取得すると、私の子ルートがレンダリングされていない：私はthe popular react-redux-starter-kitを使用していると私はそうのような私のルートに単純なラッパーコンポーネントを追加しようとしている参考

：

Warning: Failed prop type: Required prop `children` was not specified in `CoreLayout`. 
    in CoreLayout (created by RouterContext) 
    in RouterContext (created by Router) 
    in Router (created by AppContainer) 
    in div (created by AppContainer) 
    in Provider (created by AppContainer) 
    in AppContainer 

基本的に私が子供のルートに子供のルートを入れ子にした場合、私は子供がいなくて不満を訴えます。ここで

がいっぱいのセットアップです：

main.js

const MOUNT_NODE = document.getElementById('root') 

let render =() => { 
    const routes = require('./routes/index').default(store) 

    ReactDOM.render(
    <AppContainer 
     store={store} 
     history={history} 
     routes={routes} 
    />, 
    MOUNT_NODE 
) 
} 

/routes/index.js

import CoreLayout from '../layouts/CoreLayout/CoreLayout' 
import Home from './Home' 
import NestedChild from './NestedChild' 
import TransitionWrapper from './TransitionWrapper' 

export const createRoutes = (store) => ({ 
    path: '/', 
    component: CoreLayout, 
    indexRoute: Home, 
    childRoutes: [{ 
    component: TransitionWrapper, 
    childRoutes: [ 
     NestedChild 
     ] 
    }] 
}) 

AppContainer.js

class AppContainer extends Component { 
    static propTypes = { 
    history: PropTypes.object.isRequired, 
    routes: PropTypes.object.isRequired, 
    store: PropTypes.object.isRequired 
    } 

    render() { 
    const { history, routes, store } = this.props 

    return (
     <Provider store={store}> 
     <div style={{ height: '100%' }}> 
      <Router history={history} children={routes} /> 
     </div> 
     </Provider> 
    ) 
    } 
} 

export default AppContainer 

CoreLayout.js

import React from 'react' 
import Header from '../../components/Header' 
import classes from './CoreLayout.scss' 
import '../../styles/core.scss' 

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

CoreLayout.propTypes = { 
    children: React.PropTypes.element.isRequired 
} 

export default CoreLayout 

TransitionWrappper.js < ---

const TransitionWrapper = (props) => (

    <div className="im-not-working"> 
    {this.props.children} 

    </div> 
) 

export default TransitionWrapper 

NestedChild.js <をレンダリングれていません---あなただけCoreLayoutのchildren小道具からisRequiredを削除しようとしたことがあり

Answer 1

をレンダリングしていませんか？

子コンポーネントを動的にロードする場合は、子コンポーネントを配置する前にレンダリングする時間があります。