0

I used CSS transitions from react-transition-group in order to make transitions between different routes animated. Below is how the code roughly looks like:

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

Animations work fine, but what I found is that the order in which components are being mounted and unmounted is not the way I want it to be. The thing is that If I use the same code without animations, when I go from route "/" to route "/login", firstly HomeComponent gets unmounted and only then react mounts LoginComponent. However, using animations, when the same change of route happens, firstly LoginComponent is being mounted and afterward HomeComponent is being unmounted. In my opinion, this behaviour is not obviously expected.

So the question is: is it possible to remain animated routes in my app and change this odd order in which components are being mounted and unmounted? If no, how can I know, being inside my LoginComponent, that HomeComponent is now unmounted without manipulating any global state?

Timur Rakhimzhan
  • 123
  • 7
  • the order is most likely mount new component -> animation to swap components -> unmount old component. It is actually impossible to unmount and still preserve a component, with the opposite also true, not possible to show an unmounted component. Am I misunderstanding? – Datner Nov 26 '20 at 14:16
  • Yeah, I agree with that. But how can I know then when HomeComponent gets unmounted? – Timur Rakhimzhan Nov 26 '20 at 14:22
  • depneding on the impl, either [lifecycle](https://reactjs.org/docs/state-and-lifecycle.html) or the [return value of useEffect](https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect) – Datner Nov 26 '20 at 14:25
  • I mean, I want to know that in the separate component. Of course, I can somehow change global state on unmounting of HomeComponent, so inside my LoginComponent I can know that HomeComponent has been unmounted by accessing the global state. But I feel that this is not okay. Does not feel like this is really a good solution to the problem. Is there any other way? – Timur Rakhimzhan Nov 26 '20 at 14:27

0 Answers0