0

我使用了来自 react-transition-group 的 CSS 过渡，以使不同路线之间的过渡动​​画化。下面是代码的大致样子：

<BrowserRouter>
  <TransitionGroup>
    <CSSTransition
      timeout={350}
      classNames="page"
      key={location.key} //location is object returned by useLocation() hook
      unmountOnExit
    >
      <Switch location={location}>
        <Route path="/" component={HomeComponent} />
        <Route path="/login" component={LoginComponent} />
      </Switch>
    </CSSTransition>
  </TransitionGroup>
</BrowserRouter>

动画效果很好，但我发现安装和卸载组件的顺序不是我想要的方式。问题是如果我使用没有动画的相同代码，当我从路由“/”转到路由“/login”时，首先 HomeComponent 被卸载，然后才反应安装 LoginComponent。但是，使用动画，当发生相同的路由更改时，首先会安装 LoginComponent，然后会卸载 HomeComponent。在我看来，这种行为显然不是预期的。

所以问题是：是否可以在我的应用程序中保留动画路线并更改组件安装和卸载的奇怪顺序？如果不是，我怎么知道，在我的 LoginComponent 中，HomeComponent 现在已被卸载而没有操作任何全局状态？

4

0 回答 0