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;