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;

当运行应用程序时，只显示“应用程序标题”元素。我希望主页面元素也会显示，但它却没有出现。有人知道我做错了什么吗？

- Anto

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;

- Shubham Khatri