Support cloneElement in RSC-rendered <Link /> (better compatibility with Radix Primitives & friends)

[mschinis]

Description

I'm trying to use shadcn NavigationMenu together with the next-intl link, using legacyBehavior+passHref but I'm getting a bunch of the following warnings:

"onClick" was passed to <Link> with `href` of `/about` but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link 

Usage

// Import next-intl Link component returned by createSharedPathnamesNavigation
import { Link } from "@/i18n/navigation"; 

function NavigationMenuLocalizedLink({ item }: { item: INavigationMenuItem }) {
  return (
    <Link href={item.href} legacyBehavior passHref>
      <NavigationMenuLink>{item.title}</NavigationMenuLink>
    </Link>
  );
}

Tracing back the issue, it looks like nextjs doesn't like setting the onClick property, when legacyBehavior is set.

next-intl/packages/next-intl/src/navigation/shared/BaseLink.tsx

Line 76 in ed4681f

onClick={onLinkClick}

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/mschinis/next-intl-bug-repro-app-router

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Look at console

Expected behaviour

Expected behavior is to not have any warnings.

[mschinis]

The following workaround seems to work for now, but the behavior of the issue still stands:

'use client';

function NavigationMenuLocalizedLink({ item }: { item: INavigationMenuItem }) {
  return (
    <NavigationMenuLink asChild>
      <Link href={item.href}>{item.title}</Link>
    </NavigationMenuLink>
  );
}

[amannn]

Thanks for the careful report and reproduction!

This could probably be addressed by adding cloneElement in BaseLink in case legacyBehavior is detected. I'm not sure though if it's worth it though, given that—as the name suggests—this is legacy behavior and there are modern alternatives (like the one you suggested).

This was in fact the first time this was reported, so maybe it's a good idea to keep this open to see if more people are affected and to give visibility to the alternative you've posted.

[rogerogers]

Yes, I'm also facing the same issue. Directly importing from next/link does not have this problem.

[amannn]

This topic came up again in #1322 and I've added some details in #1322 (comment).

Will have a look if we can improve something here.

Btw. possibly a non-obtrusive workaround might be this:

// components/Link.tsx
'use client';

// Re-export from the file that creates the `<Link />` component
export {Link as default} from '@/routing';

// Import the re-exported `Link`
import Link from "components/Link"; 

function NavigationMenuLocalizedLink({ item }: { item: INavigationMenuItem }) {
  return (
    <Link href={item.href} legacyBehavior passHref>
      <NavigationMenuLink>{item.title}</NavigationMenuLink>
    </Link>
  );
}

I think this should work as expected with Radix Primitives & friends.

EDIT: Asked the Radix team here about an alternative implementation that would work with RSC: radix-ui/primitives#2537 (comment).

[amannn]

It seems like Radix Primitives will switch to a new API eventually that does not require cloneElement: https://x.com/vladyslavmoroz/status/1863986795601363285