외부 반응 구성 요소/모듈을위한 라우팅

Question

많은 하위 레벨/페이지와 경로가있는 외부 React 구성 요소/모듈을 구축 중입니다. React Router V4를 사용하고 있습니다. 이 구성 요소는 자체 라우팅 시스템이있는 호스트 응용 프로그램으로 가져옵니다. 호스트 응용 프로그램은 React Router V4도 사용하고 있습니다.

구성 요소의 루트보기는 카드의 격자보기이며 사용자가 카드 중 하나를 클릭하면 카드의 상세보기로 이동합니다. 사용자가 상세 뷰에 있으면 브라우저의 URL이 변경되어 사용자가 해당 페이지의 URL을 북마크하고 나중에 해당 페이지를 방문 할 수 있도록 변경해야합니다.

호스트 응용 프로그램과 구성 요소 간의 라우팅은 어떻게해야합니까? 호스트 응용 프로그램은 경로 스키마에서 구성 요소로 전달해야합니까? 그렇지 않으면 구성 요소와 호스트 응용 프로그램에 자체 라우팅 시스템이 있어야합니다. 누구든지 이것에 대한 예를 알고 있습니까?

Answer 1

리액터 라우터 V4는이 상황에서 매우 잘 동작합니다. 두 앱 모두 독립 실행 형을 실행하려면 자체 최상위 라우터 구성 요소가 필요합니다. 하지만 SubModule에 대한 기본 switch 문을 다시 사용할 수 있도록 코드를 구성 할 수 있습니다. 호스트 응용 프로그램의 URL은 모두/subModule /, 즉/subModule/foo가 접두어로 사용되며 subModule 독립 실행 형 응용 프로그램에서만/foo가됩니다.

HostApp.jsx 
<Router> 
<Switch> 
<Route path="/other" component={Other} /> 
<Route path="/subModule" component={SubModuleRouter} /> 
</Switch> 
</Router> 

SubModule.jsx 
<Router> 
    <Route path="/" component={SubModuleRouter} /> 
</Router> 

SubModuleRouter.jsx 
<Switch> 
<Route exact path="/foo" component={FooComponent} /> 
</Switch>