Warning: Function components cannot be given refs

Question

I'm using Next.js latest version for making my blog website, don't know why show me error, when I'm trying to make my form then show me error like this:

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

I'm tried below code:

import React, { useState } from "react";
import { APP_NAME } from "../config";
import Link from "next/link";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
} from "reactstrap";

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Navbar color="light" light expand="md">
        <Link href="/">
          <NavbarBrand className="font-weight-bold">{APP_NAME}</NavbarBrand>
        </Link>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="m-auto" navbar>
            <NavItem>
              <Link href="/signup">
                <NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
              </Link>
            </NavItem>
            <NavItem>
              <Link href="/signin">
                <NavLink style={{ cursor: "pointer" }}>Signin</NavLink>
              </Link>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
};

export default Header;

please give me your valuable suggestion.

Answer 1

The easiest solution may be to wrap your NavLink with a native html element. In your case:

<Link href="/signup" passHref>
  <a>
    <NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
  </a>
</Link>