하위보기 렌더링, 기록 유지 및 전체보기 다시 렌더링 안 함. 이것이 가능한가?

Question

기존 반응 애플리케이션을 director에서 react-router을 사용하여 마이그레이션하는 중입니다. 제가 지금까지 그것을 사랑하고 있지만, 전체 페이지를 다시 렌더링하지 않고도 역사를 유지하는 것은 감독이 쉬웠습니다. 그리고 이것이 react-router으로 가능한지 확실하지 않습니다.

보기를 가지고 싶습니다. 전화 번호는 Slides이고 다른 두 개의 중첩 된보기 구성 요소는 One 및 Two입니다.

라우터에서 이러한 구성 요소는 /slides, slides/one 및 slides/two으로 매핑됩니다.

Slides은 Header, Nav 및 Footer과 같은 다양한 레이아웃 구성 요소를 포함합니다. 이들은 기본적으로 정적입니다.

이제 슬라이드 사이를 이동할 때 재생되는 임시 애니메이션이 있습니다. 이전 라우터에서는 Slides 및 모든 하위 구성 요소를 다시 렌더링하지 않고도이 작업을 수행 할 수있었습니다. https://github.com/reactjs/react-router/issues/266과 https://github.com/reactjs/react-router/issues/3691을 읽은 후에 나는 이것이 가능하지 않을 수도 있다고 생각했습니다.

CSSTransitionsGroup을 통해이를 수행하고 다시 렌더링 만 허용하는 방법은 무엇입니까? 렌더링이 느리고 정적 구성 요소가 깜박이거나 빠져 나오면 UI에 좋지 않을 것입니다.

조언을 보내 주시면 감사하겠습니다.

Answer 1

당신은 하위 경로를 정의해야합니다

<Route path="slides" component={Slides}> 
    <Route path="one" component={SlideOne}/> 
    <Route path="two" component={SlideTwo}/> 
    <Route path="three" component={SlideThree}/> 
</Route> 

그런 다음 Slides.jsx에 당신이 하위 구성 요소가 라우터에 의해 삽입 될 위치를 정의하기 위해 render() 방법에 {this.props.children}를 사용

. 렌더링됩니다 /slides/one /slides/two 만 자식 요소에서 경로의 변경이있을 때

/slides/one 등 구성 요소 Slides 및 구성 요소 SlideOne을 렌더링합니다. Slides은 업데이트되지 않습니다. 서로 다른 역사 모듈에 대한

<Router history={browserHistory}> 
... 
</Router> 

These are the docs :

는 라우터에서 역사 소품을 정의해야 내역을 관리 할 수 ​​있습니다.