react-transition-group & react-router refNode

Question

I'm using react-transition-group to animate transtitions between pages in react-router.

When i don't use nodeRef={nodeRef} animation works fine but I get this error:

"findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: fb.me/react-strict-mode-find-node"

When I use nodeRef={nodeRed} animation does't work but I don't get an error.

How to do it to not get an error and have working animation


import React, { useRef } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

const nodeRef = useRef(null)

       <Route render={({location}) => (

       <TransitionGroup>
         <CSSTransition nodeRef={nodeRef} key={location.key} timeout={2000} classNames="fade">

         <Switch location={location}>

           <Route path='/' exact component={Home}/>
           <Route path='/about' component={About}/>
           <Route path='/skills' component={Skills}/>
           <Route path='/projects' component={Projects}/>
           <Route path='/contact' component={Contact}/>

         </Switch>

         </CSSTransition>
     </TransitionGroup>

   )} />

   </Router>```

score 0 · Answer 1 · answered Jul 15 '20 at 20:30

I've been having this issue as well. Then I found this page in the react-transition-group docs that basically suggests you avoid using TransitionGroup entirely when dealing with react-router, and just wrap all of your components rendered by a Route inside of CSSTransition directly. Link is here: http://reactcommunity.org/react-transition-group/with-react-router/

In case the link breaks in the future, here's the relevant bit:

People often want to animate route transitions, which can result in delightful UX when used in moderation. The first instict might be to use wrap all routes in TransitionGroup, but that approach requires hacks and falls apart easily when used with trickier components of React Router like Redirect. You should use CSSTransition for each route and manage their in prop on their own.

The main challenge is the exit transition because React Router changes to a new route instantly, so we need to keep the old route around long enough to transition out of it. Fortunately, Route's children prop also accepts a function, which should not be confused with the render prop! Unlike the render prop, children function runs whether the route is matched or not. React Router passes the object containing a match object, which exists if the route matches, otherwise it's null. This enables us to manage the in prop of CSSTransition based on the presence of match.

There's a demo app as well, I won't share it all but here's the relevant portion as far as <Route> is concerned:

<Route key={path} exact path={path}>
  {({ match }) => (
    <CSSTransition
      in={match != null}
      timeout={300}
      classNames="page"
      unmountOnExit
    >
      <div className="page">
        <Component />
      </div>
    </CSSTransition>
  )}
</Route>

score -3 · Answer 2 · answered Jun 21 '20 at 22:46

-3

I think this is your error:

nodeRef = useRef(null)

Should be:

nodeRef = React.useRef(null)

answered Jun 21 '20 at 22:46

Vicente Losada Fadul

115
1
4

react-transition-group & react-router refNode

2 Answers2