IndexRouteがルート内に表示されない

Question

私はリアクションの初心者です。子としてルートとインデックスルートを含む基本的なルーティングアプリケーションを作成しました。実行している場合

var React = require('react'); 

var MainPage = React.createClass({ 

    render: function(){ 
    return(<div>Main Page</div>); 
    } 
}) 

module.exports = MainPage; 

：

var React = require('react'); 

var ApplicationHeader = React.createClass({ 

    render: function() { 
     return (<header> 
     <div>Application Header</div> 
     </header>) 
    } 
    } 
) 

module.exports = ApplicationHeader; 

MainPage.jsファイルは以下の通りです：

var React = require('react'); 
var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var browserHistory = ReactRouter.browserHistory; 
var IndexRoute = ReactRouter.IndexRoute; 
var ApplicationHeader = require('../new_components/ApplicationHeader'); 
var MainPage = require('../new_components/MainPage'); 

var routes = (
<Router history={browserHistory}> 
<Route path="/" component={ApplicationHeader}> 
    <IndexRoute component={MainPage}/> 
</Route> 
</Router> 
); 

module.exports = routes; 

ApplicationHeader.jsファイルは以下の通りです：routes.jsファイルは以下のとおりです。ただし、「Application Header」要素のみが表示されます。私は、メインページの要素も表示する必要がありますが、期待していません。誰かが私が間違っていることを知っていますか？

Answer 1

あなたが子供をレンダリングする必要があなたのApplicationHeaderコンポーネントで

同様

var React = require('react'); 

var ApplicationHeader = React.createClass({ 

    render: function() { 
     return (
     <div> 
      <header> 
      <div>Application Header</div> 
      </header> 
      <div>{this.props.children}</div> 
     </div> 
    ) 
    } 
    } 
) 

module.exports = ApplicationHeader;