我是一个 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;
但是,运行应用程序时,仅显示“应用程序 header ”元素。我确实希望主页元素也应该显示,但事实并非如此。有谁知道我做错了什么?
最佳答案
在您的 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;
关于reactjs - IndexRoute 未显示在路线内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39704421/