IndexRoute不會顯示在路徑中

Question

我是一名React新手，我創建了一個基本的路由應用程序，其中包含一個路線和一個索引路線作爲子節點。該routes.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文件如下：

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 MainPage = React.createClass({ 

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

module.exports = MainPage; 

運行時但是應用程序只顯示'應用程序標題'元素。我確實期望主頁面元素也應該顯示出來，但事實並非如此。有誰知道我做錯了什麼？

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;