debugreactCritical

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

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

givenwhenfunctiondomcannotrefsavoidcomponentsreactusing

Problem

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 ;
}

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) => );
    return ;
}

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

Solution

Just give it as innerRef,

// Client.js

Use it as ref.

// Input.js
const Input = ({ innerRef }) => {
  return (
    
      
    
  )
}

Code Snippets

// Client.js
<Input innerRef={inputRef} />

// Input.js
const Input = ({ innerRef }) => {
  return (
    <div>
      <input ref={innerRef} />
    </div>
  )
}

Context

Stack Overflow Q#56484686, score: 150

Revisions (0)

No revisions yet.