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

【问题标题】：React router animations. How to preserve components from unmounting during route transition反应路由器动画。如何在路由转换期间防止组件被卸载
【发布时间】：2015-10-10 02:54:01
【问题描述】：

在我们当前的项目中，我们对少数内容页面使用手风琴式效果。（例如：打开https://domena.redesignum.cz/search/hello%20github 点击任何域，然后在右下角点击“pokračovat”）。如你看到的。当您进入另一页时，会出现缩小第一页和第二页的动画。

在我当前的解决方案中，我使用的是 react-routes doc 中的“无 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 是我的组件，它的工作方式与 react Css Transitions 相同，但动画引擎是 Greensock。

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

当我尝试重构为 react-router（1.0.0.beta3 但与 0.13.3 相同的问题）时，我将此 if/else 拆分为单独的组件（页面）并将它们应用于 react-router。

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

动画无法正常工作，因为在每次路由转换时，页面组件也会被另一个组件和子组件替换。这打破了动画。

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

【问题讨论】：

您找到解决方案了吗？我正在尝试做一些非常相似的事情。
一直在使用 react-mini-router，但这很糟糕 :)

标签： animation reactjs react-router

【解决方案1】：

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

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

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

【讨论】：