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/         


        

Answer 1

Hi You can use refs instead of ref

    <InputText
        label="Phone Number"
        name="phoneNumber"
        refs={register({ required: true })}
        error={errors.phoneNumber ? true : false}
        icon={MailIcon}
   />

Answer 2

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://material-ui.com/getting-started/faq/#how-do-i-use-react-router which links to https://material-ui.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