How to prevent component from unmounting immediately when using React Router V4

Question

I am using react-transition-group's tag to create animations between routes using react-router-v4. I am using tags to switch between routes in my code based off of changes in state. The issue that I am running into is, when a is triggered, the component immediately unmounts, before giving the exit animation time to play out. The new route animates in correctly.

I have tried to solve this by following this page on the React Transition Group site: https://reactcommunity.org/react-transition-group/with-react-router

It acknowledges the problem that I am having with the components immediately unmounting, but my solution does not seem to be working.

const routes = [
  { path: '/', name: 'Dashboard', Component: Dashboard },
  { path: '/detailedview', name: 'DetailedView', Component: DetailedView },
  { path: '/dashboardloop', name: 'DashboardLoop', Component: DashboardLoop },
]

function Example() {
  return (
    <Router>
      <>
        <Container className="container">
          {routes.map(({ path, Component }) => (
            <Route key={path} exact path={path}>
              {({ match }) => (
                <CSSTransition
                  in={match != null}
                  timeout={500}
                  classNames="page"
                  unmountOnExit
                >
                  <div className="page">
                    <Component />
                  </div>
                </CSSTransition>
              )}
            </Route>
          ))}
        </Container>
      </>
    </Router>
  )
}

ReactDOM.render((
  <Example/>
), document.getElementById('root'));

Any help would be appreciated with this! Thank you

finkin finkin · Accepted Answer · 2020-07-23T14:16:06

Late to the party, you might already solved this on your own, but for the record to people googling for this problem: Check your css.

CSSTransition relies on four css classes (as stated in the documentation):

/* Starting style of enter animation, i.e when element is still invisible */
.page-transition-enter{
}

/* How the element will look on the page + transition (which does the animation) goes here*/
.page-transition-enter-active{
}

/* Start of exit animation, usually how the element looks on the page */
.page-transition-exit{
}

/*The end-style of exit-animation + transition */
.page-transition-exit-active{
}

A simple transition example from React Transition Group documentation (http://reactcommunity.org/react-transition-group/css-transition):

.page-enter {
  opacity: 0;
}
.page-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.page-exit {
  opacity: 1;
}
.page-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

As your element unmounts without animation but animates when entering, it seems that you are most likely missing something from the last two classes. Or missing either or both classes altogether.

How to prevent component from unmounting immediately when using React Router V4

1 Answers