Another "<Link> causes refresh" issue

[letterix]

Hi, i've been searching for an answer here and on SO, but havn't found any that seem to apply to us.

We are currently creating a page using react-native-web and NextJS. When using a Link on the page, with a direct anchor child, everything works fine:

    <Link href={url} as={urlAs}>
      <a>
        Test
      </a>
    </Link>

However, when using a functional component as a child, the page refreshes for the exact same routes:

  const Wrapper = ({ children, href } : { children: ReactNode, href?: string }) => (
    <a href={href}>{children}</a>
  );

...
    <Link href={url} as={urlAs} passHref>
      <Wrapper>
        Test
      </Wrapper>
    </Link>

Any idea what could be up here?

[cristiand391]

If the child of Link is a functional component you have wrap the component in React.forwardRef

Try with this:

import React from 'react'
...
...
const Wrapper = React.forwardRef(({ onClick, children, href }, ref) => (
  <a href={href} onClick={onClick} ref={ref}>{children}</a>
))

Next.js docs

[letterix]

The ref part, i had already tried and failed with, but what i missed was the onClick handler. Adding forwardRed + the onClick handler solved everything :)

Thanks a bunch!