How do I avoid 'Function components cannot be given refs' when using react-router-dom?

Question

I have the following (using Material UI)....

import React from "react"; import { NavLink } from "react-router-dom"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; function LinkTab(link){     return <Tab component={NavLink}         to={link.link}         label={link.label}         value={link.link}         key={link.link}     />; } 

In the new versions this causes the following warning...

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

Check the render method of ForwardRef. in NavLink (created by ForwardRef)

I tried changing to...

function LinkTab(link){     // See https://material-ui.com/guides/composition/#caveat-with-refs     const MyLink = React.forwardRef((props, ref) => <NavLink {...props} ref={ref} />);     return <Tab component={MyLink}         to={link.link}         label={link.label}         value={link.link}         key={link.link}     />; } 

But I still get the warning. How do I resolve this issue?

Answer 1

NavLink from react-router is a function component that is a specialized version of Link which exposes a innerRef prop for that purpose.

// required for react-router-dom < 6.0.0 // see https://github.com/ReactTraining/react-router/issues/6056#issuecomment-435524678 const MyLink = React.forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />); 

You could've also searched our docs for react-router which leads you to https://mui.com/getting-started/faq/#how-do-i-use-react-router which links to https://mui.com/components/buttons/#third-party-routing-library. The last link provides a working example and also explains how this will likely change in react-router v6