24621


react-routerを使ったアプリで下記のルーターを定義して、一番外側のRootにmaterial-
uiのAppBarとLeftNavを定義しましたがそれらが表示されませんし、divも表示されていません。しかしその子供のViewは表示されています。

router.js

[code]

    export default (
      <Route path="/" component={Root}>
        <Route path="path1" component={App1}/>
        <Route path="path2" component={App2}/>
        <Route path="path3" component={App3}/>
      </Route>
    );
    
[/code]

Root.react.js

[code]

    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>
        )
      }
    }
    
[/code]

どこを修正すればAppBarとLeftNavを表示できるのでしょうか。ご教授ください。


CC BY-SA 3.0
2016-05-05T10:16:22.957
24583
2016-05-07T01:19:36.280
7232
question
javascript reactjs
react-routerで親で定義したcomponentが表示されない


自己解決しました。Rootのexport宣言が抜けていました。なぜこれで動いていなたのかはなぞです。


CC BY-SA 3.0
2016-05-07T01:19:36.280
24621
2016-05-07T01:19:36.280
7232
24583
answer