React router findDomNode is deprecated

Question

I'm working on my React website and I'm using React-router-dom for switching routes and React-transition-group to animate these routes. Everything is working just fine except I'm getting an error in my console when I switch routes.

Error :

I'm not that skilled in React yet and had this problem before and didn't fixed it. I've tried to google it but all I've found was to disable StrickMode and I think that's not the right solution.

App.js file

<Router>
        <div className="App">
          <div className="wrapper">
          <Navigation />
              <Route key="/" exact path="/">
                  {({match})=>(
                    <CSSTransition
                      in={match != null}
                      timeout={300}
                      classNames="slide-backward"
                      unmountOnExit
                      >
                        <div className="page">
                          <Home />
                        </div>

                    </CSSTransition>
                  )}
              </Route>

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

                    </CSSTransition>
                  )}
            </Route>
       </div>
   </div>
</Router>

Navigation component

<div className="menu">
   <ul>
     <li><NavLink to="/" exact activeClassName="active">Domov</NavLink></li>
     <li><NavLink to="/about" exact activeClassName="active">O nás</NavLink></li>
   </ul>
</div>

Many thanks in advance.

Rhyan-WoodsAndWalker · Answer 1 · 2020-12-04T10:08:15.287

Slightly late - but for the sake of there being an answer here if anyone else comes across this..

OP - your issue stems from the react-transition-group package using findDOMnode in it's code, not yours; it looks like you can create a ref and pass this into your CSSTransition element in order to remove the error, see here if you want to try that out (make sure you're version of react-transition-group is up-to-date as well).

failing that, since you admit you're fairly new to React & there's no major pain points other than the warning it's probably safe enough to ignore this for now - it's likely future versions of these packages will remove findDOMnode and you won't see these errors.

Explanation
The warning stems from the use of the findDOMnode escape hatch built into react. This lets react find native elements in the DOM but this goes against reacts whole idea of not directly using the DOM

To avoid this, you should be using refs in order to point to elements, rather than using findDOMnode.

React router findDomNode is deprecated

1 Answers1