중첩 된 구문을 사용하여 대응 라우터 마스터 세부 설정

Question

마스터/세부 유형 설정이있는 앱을 작성하고 있습니다.

나는 두 개의 서로 다른 경로 원하는 :

• /items 항목 목록 페이지 (모든 항목)
• /items/item-slug 항목의 세부 정보 페이지 (단일 항목)

을 나는 다음과 같은 설정이 있습니다

을

<Route name="app" component={App} path="/"> 
    <IndexRoute component={ItemList} /> 
    <Route name="itemList" component={ItemList} path="items"> 
    <Route name="itemDetail" component={ItemDetail} path=":itemSlug" /> 
    </Route> 
</Route> 

리스팅 경로는 작동하지만 아이템 라우트 e는 절대로 도달하지 않습니다 (항목 페이지 대신 목록 페이지 표시).

모두는 다음과 같은 구조 예상대로 작동합니다

<Route name="app" component={App} path="/"> 
    <IndexRoute component={ItemList} /> 
    <Route name="itemList" component={ItemList} path="items" /> 
    <Route name="itemDetail" component={ItemDetail} path="items/:itemSlug" /> 
</Route> 

...하지만 react-router's documentation을 읽은 후 나는 내 부탁에 둥지를 사용할 수 있습니다 인상이었다.

라우팅이 예상대로 작동하도록 첫 번째 스 니펫을 수정할 수 있습니까? 아니면 두 번째 스 니펫이이 기능을 처리하는 올바른 방법입니까?

Answer 1

에서 items/ 경로 구성 요소를 스트리핑

<Route name="app" component={App} path="/"> 
    <IndexRoute component={ItemList} /> 
    <Route name="itemList" component={ItemList} path="items"> 
    <Route name="itemDetail" component={ItemDetail} path=":itemSlug" /> 
    </Route> 
</Route> 

보십시오. 내가 할 수있는 일은 다음과 같습니다.

<Route name="app" component={App} path="/"> 
    <IndexRedirect to="items" /> 
    <Route path="items"> 
    <IndexRoute name="itemList" component={ItemList} /> 
    <Route name="itemDetail" component={ItemDetail} path=":itemSlug" /> 
    </Route> 
</Route> 

Answer 2

는 다른 내부 둥지 일 수 없습니다, 당신은 ItemList 내부에 둥지 ItemDetail하지 않으려는 것을 가정하고 itemDetail 경로

Answer 3

경로를 중첩하면 상위 구성 요소에 렌더링 된 하위가 있어야합니다.

그래서 ItemList 구성 요소의 아웃 렌더링 그래서

render(){return(<div>{this.props.children}</div>});}