Link with forwardRef component not working

Bug report

Describe the bug

Link with forward ref doesn’t work anymore. If I pass passHref than it passes the href but the page gets reloaded.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

import React from "react";
import Link from "next/link";

const MyButton = React.forwardRef(({ onClick, href }, ref) => (
  <a href={href} onClick={console.log} ref={ref}>
    Click Me
  </a>
))

const Home = () => (
  <div>
      <Link href="/another">
        <MyButton />
      </Link>
  </div>
);

export default Home;

https://codesandbox.io/s/nextjs-wtnzg https://github.com/rahul3103/testLink

Expected behavior

I expected url to be seen in the bottom left on hover but it was not there, than I inspected a and there was no href. But, I was getting the onClick event. Than, I added passHref to Link. After that href was there but onClick the whole page was getting re rendered.

System information

• OS: [macOS]
• Browser [chrome]
• Version of Next.js: [9.1.6]

Additional context

Add any other context about the problem here.

[ijjk]

As mentioned by @jamesmosier the props like onClick added by next/link needs to be passed or else Next.js can’t handle it for you. We recommend having the a tag directly as the child of a Link component since it provides the best experience and makes sure you don’t have to worry about passing props like this.

I’m going to close this as it doesn’t seem to be an issue with Next.js and we also already have tests covering this here

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.