대응 라우터 4 : 레이아웃 구성 요소에 경로 소품 전달

Question

루트 소품을 사용하여 초기 API 요청을 수행하는 레이아웃 구성 요소에 경로 소품을 전달하려고합니다. 문제는 이러한 경로 소품이 하위 노드로 전달된다는 것입니다. 노선. 사용자가 /some/:route 경로를 명중하면

<BrowserRouter> 
    <Switch> 
     <AppLayout> // This AppLayout performs API requests 
        // with the :route param in the child routes. 
      <Route path="/some/:route" component={SomeComponent} /> 
      <Route path="/some/other/:route" component={OtherComponent} /> 
     </AppLayout> 
    </Switch> 
</BrowserRouter> 

물론, 레이아웃은 이미 렌더링 된 것이다. 나는이 같은 일을 시도 :

<BrowserRouter> 
    <Route path="/some/:route" render={(props) => 
     (<AppLayout {...props}><SomeComponent /></AppLayout>)} /> 
</BrowserRouter> 

이 작동하지만 AppLayout 마운트 해제하고 내가 같은 레이아웃을 사용하여 다른 경로로 이동 때마다 다시 마운트합니다. 반응 라우터 3

, 나는 이런 식으로 뭔가를 할 수 :

<Router history={browserHistory}> 
    <Route path="/" component={AppLayout}> 
     <Route path="/some/:route" component={SomeComponent} /> 
     <Route path="/some/other/:route" component={OtherComponent} /> 
    </Route> 
</Router> 

그리고 경로 소품은 AppLayout 구성 요소에서 사용할 수있다.

반응 라우터 4를 실제로 구현하는 방법이 있습니까? 내가 AppLayout에 라우터 소품을 전달하고 두 경로에 대한 핸들러로 AppLayout 구성 요소를 사용하고 어떻게

<BrowserRouter> 
    <Switch> 
     <Route exact path="/" render={props => <AppLayout {...this.props} />} /> 
     <Route exact path="/some/:route" component={AppLayout} /> 
     <Route exact path="/some/other/:route" component={AppLayout}/> 
    </Switch> 
</BrowserRouter> 

주의 사항 : 둥지 경로를 원하기 때문에

Answer 1

은 다음과 같이해야합니다. 이제 AppLayout 구성 요소 내에서이 같은 각각의 구성 요소를 다시 노선을 언급해야합니다 :

<Switch> 
    <Route exact path="/some/:route" render={props => <SomeComponent {...this.props} />} /> 
    <Route exact path="/some/other/:route" render={props => <OtherComponent {...this.props} />} /> 
</Switch>