중첩 된 세부 노선 라우터 반응

Question

렌더링하지로 내 경로 설정에 반응 라우터 플러그인을 사용하고 내가 두 개의 경로를 제공하고자하는 (꽤 공통) list/ 및 list/:id 은 내가 가지고 어떤 작업 것은이있다 :

<Routes> 
    <Route handler={App}> 
     <Route name="list" 
      handler={ListComponent} 
      collection={new Collection()}> 
     </Route> 
    </Route> 
</Routes> 

하지만 내 세부 경로를 얻으려고 애 쓰고 있습니다. 내가 시도하는 것입니다 : 어떻게 것 내가 매니저 : 목록/123 (예)

두 번째로 액세스 할 때, 문제는이 작동 할 경우에도, 내 DetailsComponent가 렌더링되지 않으며, 현재 작동하지 않는

<Routes> 
    <Route handler={App}> 
     <Route name="list" 
      handler={ListComponent} 
      collection={new Collection()}> 
      <Route name="list.details" 
       path="list/:id" 
       handler={DetailsComponent}> 
     </Route> 
    </Route> 
</Routes> 

우선 내 컬렉션의 한 모델을 DetailsComponent에 "아래로"전달 하시겠습니까?

Answer 1

첫 번째 질문에 답하려면 라우터 코드에 두 가지 문제가 있습니다.

1. 당신은 모든 Route 구성 요소를 닫아야합니다 : 공교롭게도, 슬래시 두 문제에 대한 답이다. <Route>을 단독으로 쓸 경우 <Route/>과 같이 닫는 태그를 포함해야합니다.

2. 목록 경로의 시작 부분에 슬래시가 필요할 수 있습니다. 단지 명확하게하기 위해, 경로 이름은 단지 문자열 식별자입니다, 또한

   <Routes> 
       <Route handler={App}> 
        <Route name="list" 
         handler={ListComponent} 
         collection={new Collection()}> 
         <Route name="listDetails" 
          path="/list/:id" 
          handler={DetailsComponent}/> 
        </Route> 
       </Route> 
   </Routes> 
   

   :

그래서 코드처럼 보일 것이다. 모델 접근을 위해 객체 접근자인 list.details을 작성했는지 확신 할 수 없지만 만약 그렇다면 그렇게 생각하지는 않을 것입니다. 혼란을 피하기 위해 이름을 listDetails으로 변경했지만 list.details도 유효한 문자열 식별자이므로 원하는 경우 다시 변경할 수 있습니다.

여기에서 제공 한 블록의 코드 문제가 해결되었습니다. DetailsComponent 구성 요소 및/또는 오류 메시지가 표시되지 않으면 다른 문제가 있는지 확실히 말할 수 없습니다.

두 번째 쿼리와 관련하여 솔루션은 매우 간단합니다 (react-router에는 여기에서 기대할 수있는 백본 통합이 없음). 그러나 StackOverflow 규칙에 따라 한 번에 하나의 질문에만 답변 할 수 있습니다. 별도의 질문을 작성하면 답변을 드리겠습니다.