Animation 反应路由器动画。如何在路由转换期间防止组件卸载

在我们当前的项目中，我们在少数内容页面中使用了类似手风琴的效果。（示例：打开并单击任意域，然后在右下角单击“pokračovat”）。如你所见。当你转到另一页时，会出现动画，缩小第一页，显示第二页

在我当前的解决方案中，我使用React routes文档中的“无React路由器”解决方案

简化代码

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>
  }
}

render（）{
if（this.props.route==“/search/my domain”）{
搜索内容
域内容
}else if（this.props.route==“/domains”）{
搜索内容
域内容
}
}

只有页面之间的更改是ContentTransition组件的属性。 ContentTransition是我的组件，其工作方式与react Css转换相同，但动画引擎是Greensock

关键是组件保存在dom中，动画可以正常工作

当我试图重构到react路由器（1.0.0.beta3，但与0.13.3有相同的问题）时，我将if/else分解为单独的组件（页面），并将它们应用到react路由器

<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>
}

//搜索页面组件
render（）{
搜索内容
域内容
}
//域页面组件
render（）{
搜索内容
域内容
}

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

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

我问了一个类似的问题，解决我问题的方法是确保您不希望重新安装的组件密钥在转换期间保持不变

如果您希望两个子路由都处于活动状态，并且假设您的搜索组件是父路由，那么您应该将域页面嵌套在搜索页面中。这样，当您转换时，搜索组件将不会重新装载，并且域组件中的内容将在不中断动画的情况下呈现

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

您是否找到了解决方案？我正在尝试做一些非常类似的事情。一直使用react迷你路由器，但那太糟糕了：）