は、ルータに反応 - ネストされたルートは、私は現在ReactJSで開発してい

Question

をレンダリングされないし、私の周り私の頭を取得しようとしていますいくつかの理由で私のネストされたルートが表示されませんので、ルーターを反応し、それが今までうまくいきました。

基本的に '/ home'にナビゲートすると、NavBarをレンダリングし、その下にレンダリングメッセージを表示しますが、何らかの理由でNavBarのみがレンダリングされます。どこが間違っていますか？

下記のコードサンプルを参照してください。

ありがとうございました。

ReactDOM.render((
    <Router history={hashHistory}> 
    <Route path="/" component={Login}/> 
    <Route path="/signup" component={Signup}/> 
    <Route path="/companyregistration" component={CompanyRegistration}/> 
    <Route path="/adduserdetails" component={AddUserDetails}/> 
    <Route component={NavBar}> 
     <Route path="/home" component={Welcome} /> 
    </Route> 
    </Router> 
), document.getElementById("app")) 

EDIT - ナビゲーションバー：

export default React.createClass({ 
    render() { 
    return (
     <div> 
     <AppBar 
      showMenuIconButton={false} 
      title={<img src={"img/logo-nav.png"}/>} 
      iconElementRight={ 
       <RaisedButton 
        onClick={signOut} 
        label="Sign Out" 
        primary={true} 
        style={styles.button}   
        icon={ 
         <FontAwesome 
         className='super-crazy-colors' 
         name='sign-out' 
         style={{ color: '#B71C1C' }} 
         /> 
        } 
       /> 
      } 
      /> 
      {console.log(this.props.children)} 
      <div>{this.props.children}</div> 
     </div> 
    ); 
    } 
}); 

まだ何もレンダリングされませんが、にconsole.log（this.props.children）は、コンソールに '未定義' 戻っています。

Answer 1

外部ルートハンドラ（この場合はNavBar）は親コンポーネントであり、内部ルートハンドラ（Welcome）は子コンポーネントです。

Welcomeをレンダリングするには、this.props.childrenのrenderメソッドをNavBarに出力する必要があります。

しかし、名前NavBarは親コンポーネントとしてより再利用可能なコンポーネントとしてより適切に聞こえます。代わりの方法は、NavBarをWelcomeにすることです。