反應路由器動畫。如何在路由轉換期間保留組件從卸載

Question

在我們當前的項目中，我們對少數內容頁面使用效果如手風琴。 （例如：打開https://domena.redesignum.cz/search/hello%20github點擊任何域，然後在「pokračovat」的右下角）。如你看到的。當你進入另一個頁面時，會出現收縮第一頁和第二頁的動畫。

在我目前的解決方案中，我正在使用react-routes doc的「Without React Router」解決方案。

簡化代碼

render() { 
    if(this.props.route == "/search/my-domain") { 
    <div className="wrapper"> 
     <ContentTransition key="search" width="100%"> 
     <div className="search"> 
      <div>Search content</div> 
     </div> 
     </ContentTransition> 
     <ContentTransition key="domains" width={0}> 
     <div className="domains"> 
      <div>Domain content</div> 
     </div> 
     </ContentTransition> 
    </div> 
    } else if(this.props.route == "/domains") { 
    <div className="wrapper"> 
     <ContentTransition key="search" width={100}> 
     <div className="search"> 
      <div>Search content</div> 
     </div> 
     </ContentTransition> 
     <ContentTransition key="domains" width={this.props.windowWidth - 100}> 
     <div className="domains"> 
      <div>Domain content</div> 
     </div> 
     </ContentTransition> 
    </div> 
    } 
} 

頁之間只有改變是ContentTransition組件屬性。 ContentTransition是我的組件，它與反應Css轉換的工作方式相同，但動畫引擎是Greensock。

這一點是組件保存在DOM中，動畫可以正常工作。

當我試圖重構到react-router（1.0.0.beta3，但與0.13.3相同的問題）時，我將這個if/else拆分爲單獨的組件（頁面）並將它們應用於路由器。

<Route component={App}> 
    <Route path="/search/:name" component={SearchPage} /> 
    <Route path="/domains" component={DomainsPage} /> 
</Route> 

// SearchPage component 
render() { 
    <div className="wrapper"> 
    <ContentTransition width="100%"> 
     <div className="search"> 
     <div>Search content</div> 
     </div> 
    </ContentTransition> 
    <ContentTransition width={0}> 
     <div className="domains"> 
     <div>Domain content</div> 
     </div> 
    </ContentTransition> 
    </div> 
} 

// DomainPage component 
render() { 
    <div className="wrapper"> 
    <ContentTransition width="100%"> 
     <div className="search"> 
     <div>Search content</div> 
     </div> 
    </ContentTransition> 
    <ContentTransition width={0}> 
     <div className="domains"> 
     <div>Domain content</div> 
     </div> 
    </ContentTransition> 
    </div> 
} 

動畫那裏，因爲在每一個路徑轉換的頁面組件被替換爲另一個和子組件也能無法正常工作。這打破了動畫。

這個問題有什麼解決方案或最佳實踐嗎？

Answer 1

我問了一個類似的問題question here解決我的問題的方法是確保您不想重新安裝的組件密鑰在轉換過程中保持不變。

如果您希望讓兩個子路由都處於活動狀態，並且假設您的搜索組件是父節點，則應該在搜索頁面中嵌套域頁面。通過這種方式，當您轉換時，搜索組件將不會重新裝入，並且域組件中的內容將被渲染而不會出現動畫中斷。

<Route component={App}> 
    <Route path="/search/:name" component={SearchPage}> 
    <Route path="/domains" component={DomainsPage} /> 
    </Route> 
</Route>