反応ルータ（React-Redux）に 'this.props.children'をnullにするのはなぜですか？私のルートコンポーネントで

Question

は、私は次のように反応し、ルータの設定を持っている：

render(
    <div> 
    <Provider store={store}> 
     <Router history={hashHistory}> 
     <Route 
      component={HomePage} 
      path="/" 
     /> 
     <Route 
      component={FirstPage} 
      path="page1" 
     /> 
     <Route 
      component={SecondPage} 
      path="page2" 
     /> 
     </Router> 
    </Provider> 
    </div>, 
    document.getElementById('app') 
) 

はその後、私の「HomePage.js」で、以下はをクリックした場合は、「FIRSTPAGE」に行くことができます：

<RaisedButton 
    containerElement={<Link to={`FirstPage`}/>} 
    label="Sign In" 
    labelColor='#88898C' 
    labelStyle={{textTransform:'intial'}} 
    style={styles.signIn} 
/> 

function mapStateToProps(state) { 
    return state 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(actions, dispatch) 
    } 
} 

export default connect(
    mapStateToProps, mapDispatchToProps 
)(HomePage) 

そして、私のスマートコンポーネントで 'FirstPage.js'、ちょうど持っているレンダリング中：その後、

{this.props.children} 

：

を

function mapStateToProps(state) { 
    return state 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(actions, dispatch) 
    } 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(FirstPage) 

<Link/>に基づいてコンポーネントをレンダリングするには、適切なルートでクリックしますが、{this.props.children}は「null」と表示されます。たとえば、path2が呼び出された場合、FirstPage.jsの{this.props.children}の代わりに{SecondPage}がレンダリングされます。

HomePage.jsを追加する前に{this.props.children}だけを定義しても問題ありません。今すぐ追加した後、{this.props.children}は「null」と表示されます。何が問題なのでしょうか？どんな指導や洞察も高く評価されます。前もって感謝します。

Answer 1

子供がいないため、nullです。

親の<Route>に「スマートコンポーネント」または「コンテナ」が指定されている必要があります。

この場合、

<Route component={App}> 
    <Route path="/" component={HomePage} /> 
    //... 
</Route> 

、アプリのコンポーネントがそれに{this.props.children}を持つことになります（）メソッドをレンダリングです：あなたはこのような構造を持っていた場合は、props.childrenを使用します。