자식 경로가 렌더링되지 않습니다.

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') 
    } 

결과처럼 그 사진의 온 클릭에 필요한 방법을 첨부 : 리뷰 렌더링지고 있지 않습니다. 또한 프로필 사진을 클릭하면 url이/app에서/user-profile-page로 몇 초 간 변경되고 다시/app로 돌아갑니다. 내 프로필 페이지를 볼 수 없습니다.

이 내가 잘못하고있는 중이 야 무엇을 내 새 홈 페이지

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) 

입니까?

Answer 1

이 github issue에 참조하는, 중첩 IndexRoute, 당신은 대신

<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>