Using functional component as child of <Link/> doesn't work (button)

Bug report

Describe the bug

When using Link (next/Link) with a functional component (button), it stops working.

Basically, the link is ignored. The button’s click is properly triggered, but there is no redirection happening.

To Reproduce

I had the following (working) source code:

<div>
            <Link // TODO sentry warning if < 2k chars https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers
              href={`/solutions?${QUERY_SIMULATION_KEY}=${encodeQueryParameter(serializeStudentSolutionContext(studentSolutionContext))}`}
            >
              <Button
                className="btn-border"
                onClick={(): void => {
                  setIsLoadingSolutionsPage(true);
                }}
              >
                {t('chatbotPage.solutionsFound.button', 'Voir les solutions')}
                {
                  isLoadingSolutionsPage ? (
                    <>
                      {' '}<AnimatedBubble />
                    </>
                  ) : null
                }
              </Button>
            </Link>
          </div>

Which I changed into the following (non-working) code:

  const solutionsPageLink = `/solutions?${QUERY_SIMULATION_KEY}=${encodeQueryParameter(serializeStudentSolutionContext(studentSolutionContext))}`; // TODO sentry warning if < 2k chars https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers

  const SolutionsPageButton = (): JSX.Element => {
    return (
      <Button
        className="btn-border"
        onClick={(): void => {
          // Stores the selected persona in the browser localStorage
          patchUserData({ persona: studentSolutionContext.persona });

          // Starts button's animation
          setIsLoadingSolutionsPage(true);
        }}
      >
        {t('chatbotPage.solutionsFound.button', 'Voir les solutions')}
        {
          isLoadingSolutionsPage ? (
            <>
              {' '}<AnimatedBubble />
            </>
          ) : null
        }
      </Button>
    );
  };

// ...

<div>
            {
              // XXX When displayed within an iframe, then open the link in a new page
              //  The point is to avoid displaying too much on the institutional website,
              //  but rather redirect the user to our platform so that they may benefit from all our services
              isInIframe ? (
                <a
                  href={solutionsPageLink}
                  target={'_blank'} // Open in a new tab while keeping the current tab open
                >
                  <SolutionsPageButton />
                </a>
              ) : (
                <Link
                  href={solutionsPageLink}
                >
                  <SolutionsPageButton />
                </Link>
              )
            }
          </div>

Expected behavior

The Link component should redirect in both cases.

System information

• OS: [e.g. macOS, Windows] Mac
• Browser (if applies) [e.g. chrome, safari] Chrome
• Version of Next.js: [e.g. 6.0.2] 9.1

Additional context

Related to https://github.com/zeit/next.js/issues/7915, couldn’t find a solution even though I read https://nextjs.org/docs/api-reference/next/link, but there is not example when using a <Button>.

My easiest workaround would be not using a functional component, and thus duplicate my button’s code.

Alternatively, if the Link component could behave link a <a> (through prop configuration), I wouldn’t have to perform such ternary condition, and could just provide such prop dynamically (no duplicated code, no functional component)

[rafaelalmeidatk]

You are not forwarding the ref in your function component: https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-function-component

[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.