反应路由器动画。如何在路由转换期间保留组件从卸载

在我们当前的项目中，我们对少数内容页面使用效果如手风琴。（例如：打开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> 
}

动画那里，因为在每一个路径转换的页面组件被替换为另一个和子组件也能无法正常工作。这打破了动画。

这个问题有什么解决方案或最佳实践吗？

来源

2015-07-20 Schovi

你有没有找到任何解决方案？我正在尝试做类似的事情。 –

一直都在使用react-mini-router，但这很糟糕:) – Schovi

-2

我问了一个类似的问题question here解决我的问题的方法是确保您不想重新安装的组件密钥在转换过程中保持不变。

如果您希望让两个子路由都处于活动状态，并且假设您的搜索组件是父节点，则应该在搜索页面中嵌套域页面。通过这种方式，当您转换时，搜索组件将不会重新装入，并且域组件中的内容将被渲染而不会出现动画中断。

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

来源

2015-08-10 09:33:32

反应路由器动画。如何在路由转换期间保留组件从卸载

回答

相关问题