Next-i18next: <Link> inside <Trans> does not work

[ReinoutStevens]

Describe the bug

Parts of our translations have links inside them. With NextJS, these should be wrapped in a <Link> tag in order to stay in SPA mode.

Occurs in next-i18next version

0.44.0

Steps to reproduce

<Trans i18nkey="example">
Hello <Link href="example"><a>there</a></Link>
</Trans>

You will get:
Unhandled Rejection (Invariant Violation): React.Children.only expected to receive a single React element child.

I found a small discussion here: https://spectrum.chat/next-js/general/using-next-link-component-with-react-i18next-trans-component~b9d1b95e-177b-4447-8cd1-bf2f488e44d5 but that does not resolve the issue

[isaachinman]

Sorry, I don't see how this is at all an issue to be discussed within the next-i18next repository. Am I misunderstanding? Wrap it in a fragment or continue discussion in the NextJs repo/Spectrum.

[denny7]

Hello! Any workaround? Wrapping Link in fragment doesn't solve the issue. My example is:

 <Trans i18nKey="common:linkTest" parent="div">
     <Link href="/test"><a>Test</a></Link>
 </Trans>

which is single react element.

[isaachinman]

@denny7 Is this something which works with Link from NextJs core but not Link from next-i18next?

[arsea]

Neither work for me, wrapping it in a fragment either. It's just not usable at the moment.

[asterikx]

@isaachinman The Trans component is causing the issue, so I think this is very much related to this library (resp. react-i18next).

The Link component of Next.js expects a single child, e.g.:

I agree to the{' '}
<NextLink href="/privacy">
  <a>Privacy Policy</a>
</NextLink>
.

The above works fine. Wrapping it with Trans causes the Link component to break, e.g.:

<Trans i18nKey="common.forms.privacy.label">
  I agree to the{' '}
  <NextLink href="/privacy">
    <a>Privacy Policy</a>
  </NextLink>
  .
</Trans>

Since the aim of this library is i18n for Next.js, it should be in its interest to support Next.js Link within Trans.

Please consider reopening this issue.

[isaachinman]

@asterikx I completely agree that Link within Trans should be supported. However, the Trans component comes from react-i18next, and so the issue belongs in that repo. Thanks!

[asterikx]

@isaachinman alright, sure!

For future reference, https://github.com/i18next/react-i18next/issues/1090#issuecomment-615426145 provides a workaround.