Error using Link component "Warning: Function components cannot be given refs."

[RileySpiller]

Has anyone run into this console error?

"Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"

My code is:

<Link>
  <CustomStyledAComponent>Test</CustomStyledAComponent>
</Link>

[chrisneven]

Yes. You need to use React's forwardRef function in the CustomStyledAComponent like so:

const CustomStyledAComponent = React.forwardRef((props, ref) => (
  <div ref={ref}>
    {props.children}
  </div>
));

As Link wants to pas a ref to the child component in order to do link stuff, you need to forward the ref to the inner component which in the example is the div.