レンダリングされていない子ルート

Question

私はreactjsアプリケーションでネストされたルートを試しています。私はRoute "NewHome"の3つの子ルートを持っています。これは私のルート構造の様子です

<Route path='/app' onEnter={hasAuth}> 
        <IndexRoute component={NewHome}> 
         <IndexRoute component={Reviews}/> 
         <Route> 
          <Route path={"/reviews"} component={Reviews}/> 
          <Route path={"/search"} component={Search}/> 
          <Route path={'/user-profile-page'} component={UserProfilePage}/> 
         </Route> 
        </IndexRoute> 

私はアプリケーションを読み込むと、来る最初のページは/ appです。これで私はNewHomeがレンダリングされるのを見て、それは期待されています。このNewHomeでは、「レビュー」が表示/レンダリングされていません。これはインデックスルートです。

私が欲しいもの：レビューをNewHomeのデフォルト/最初のビューにします。私は自分のヘッダーにプロフィール画像を持っています。私がそれをクリックすると、レビューは/ user-profile-pageのルートに連れて行きます。レビューがレンダリング取得されていません。私はこの

to_profile_page(){ 
     this.context.router.push('/user-profile-page') 
    } 

結果のようにその絵のonclickのに必要な方法を添付しています。また、プロフィール画像をクリックすると、/ appから/ user-profile-pageへのURLが数秒間変化し、再び/ appに戻ります。プロフィールページを見ることができません。

これは私が間違って何をやっている私のNewHome

class NewHomePage extends Component { 
    render() { 
     return (
      <div className={c.container}> 
       <div className="page-content-wrapper full-height"> 
        {/*<!-- START PAGE CONTENT -->*/} 
        <div className="content full-height"> 
         <div className="container-fluid container-fluid-media full-height no-padding"> 
          <div className="row full-height no-margin"> 
           <NewSidebar/> 
           {this.props.children} 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
} 


export default withStyles(c)(NewHomePage) 

のですか？このgithub issueにそれを参照

Answer 1

、IndexRouteを入れ子にすることは許可されていない、あなたが代わりに使用する構文は、 `反応し、ルータをv4`と一致しない

<Route path='/app' onEnter={hasAuth}> 
    <Route component={NewHome}> 
     <IndexRoute component={Reviews}/> 
     <Route> 
      <Route path={"/reviews"} component={Reviews}/> 
      <Route path={"/search"} component={Search}/> 
      <Route path={'/user-profile-page'} component={UserProfilePage}/> 
     </Route> 
    </Route> 
</Router>