react-routerを使ったアプリで下記のルーターを定義して、一番外側のRootにmaterial-uiのAppBarとLeftNavを定義しましたがそれらが表示されませんし、divも表示されていません。しかしその子供のViewは表示されています。
router.js
export default (
<Route path="/" component={Root}>
<Route path="path1" component={App1}/>
<Route path="path2" component={App2}/>
<Route path="path3" component={App3}/>
</Route>
);
Root.react.js
import React, { Component } from 'react';
import { LeftNav, MenuItem, AppBar } from 'material-ui';
class Root extends Component{
static propTypes = {
children: React.PropTypes.any
};
constructor(props){
super(props);
this.state = {
open: false
};
}
leftButtonTouched(){
this.setState({
open: !this.state.open
});
}
render(){
return (
<div>
{this.props.children}
<AppBar
iconClassNameRight="muidocs-icon-navigation-expand-more"
onLeftIconButtonTouchTap={this.leftButtonTouched}/>
<LeftNav open={this.state.open}>
<MenuItem>Item1</MenuItem>
</LeftNav>
</div>
)
}
}
どこを修正すればAppBarとLeftNavを表示できるのでしょうか。ご教授ください。