React Router and useRef

Hello Community,
I spent too much time with this now, maybe someone can provide me with a shortcut:

I’m trying to use the React Router in combination with the CSSTransition extension from react-transition-group. Everything works as I want it to, but I get this nasty red warning message in the console:

Warning: 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.

This is my code:

function App() {
  const routes = [
    { path: '/', name: 'Home', Component: Home },
    { path: '/about', name: 'About', Component: About },
    { path: '/skills', name: 'Skills', Component: Skills },
    { path: '/work', name: 'Work', Component: Work },
  ];
  return (
    <Router>
        <Header/>
        
          {routes.map(({ path, Component }) => (
            <Route 
              key={path} exact 
              path={path}>
              {({ match }) => {
                
                return (
                <CSSTransition
                  
                  in={match != null}
                  timeout={1500}
                  classNames="transition"
                  unmountOnExit>
                    
                  <main className="page">
                    <Component />
                  </main>
                </CSSTransition>
              )}}
            </Route>
          ))}
            
      </Router>  
  );
}

Does anyone know how can I use useRefs in this context instead?

Hey mirja_t

This is the first time I see CSSTransition, so I am not sure I can help, but I’ll try.

React docs about useRef say that useRef is simply a container that is used to always refer to a dom element and you pass it to a component like you would pass a prop.

One simple example that shows you how to do it:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

So in your case you either create a state

myRef

or just a

const myRef

and assign it

React.createRef() //I've also seen using React.createRef(null)

Then pass it as prop to your component and to your child as:

<CSSTransition compRef={myRef} in={match != null} timeout={1500} classNames="transition" unmountOnExit>
  <main className="page" ref={props.compRef}>
    <Component />
  </main>
</CSSTransition>

or this way with a direct reference, I’m not super sure:

<CSSTransition in={match != null} timeout={1500} classNames="transition" unmountOnExit>
  <main className="page" ref={myRef}>
    <Component />
  </main>
</CSSTransition>

Does this work? :slight_smile:

Hey @usernamegiapreso
thanks for taking a look!
I have tried that before, but the problem is that the ref is a reference to a specific HTML element which means that I cannot pass it down from my App component as I understand. Due to the router, I cannot access this specific element from the App component. In your example, you’re passing the ref to the main element. But in the App component, it is not yet clear which of the four <main> elements will be rendered. And the CSSTransition distributes classes to two <main> elements - the entering and the leaving one. That means that I have to tell the CSSTransition component which children should get the class. And CSSTransition is not a DOM element, so I cannot use useRef for it. Right now, it is done with the {match} prop. But that is causing the error.
So my question is if I can do what I want with the router or if I would have to entirely reorganize my structure.

Well I tried :slight_smile:
These may be of interest if you haven’t read them yet:

Cheers,

Hey @usernamegiapreso
thanks again!
I ran into these threads while crawling the internet. The first uses a copy of CSSTransition in each component. That’s what I was hoping to avoid but will end up doing, I guess. But when I try that, I can’t get the component to unmount with a delay despite using the option ‘unmountOnExit’ which is supposed to do that.
I didn’t fully understand what the second was doing, but they didn’t seem to use routing as far as I understood.
Weird because I think that must be a very common case wanting to have a smooth page transition.
So the search goes on…

1 Like