Link component doesn't inherit frameworks' Link props

[andrecasal]

Provide a general summary of the issue here

The client-side routing integration described here doesn't account for the frameworks' <Link /> component's props.

For example, in Remix, the <Link /> component accepts a prefetch prop. This prop isn't accepted in React Aria's <Link /> component, preventing components created with <Link /> from prefetching. Likewise for other props.

🤔 Expected Behavior?

React Aria's <Link /> would merge the framework's <Link />'s props.

😯 Current Behavior

React Aria's <Link /> doesn't accept (or pass) the framework's <Link />'s props.

💁 Possible Solution

Radix UI does this with the <Slot /> component.

🔦 Context

I'm trying to build a <Link /> component for my upcoming UI library.

🖥️ Steps to Reproduce

Here's an example <Link /> component adapted for Remix.

import { type LinkProps as RemixLinkProps } from '@remix-run/react'
import { type ElementRef, forwardRef } from 'react'
import { Link as ReactAriaLink, type LinkProps as ReactAriaLinkProps } from 'react-aria-components'
import { cn } from '#app/utils/tailwind-merge.ts'

type LinkProps = Omit<ReactAriaLinkProps & RemixLinkProps, 'to'>

const Link = forwardRef<ElementRef<typeof ReactAriaLink>, LinkProps>(({ href, className, ...props }, ref) => {
	return <ReactAriaLink ref={ref} className={cn(href ? 'link' : null, className)} href={href} {...props} />
})
Link.displayName = 'Link'

export { Link }

This <Link /> component merges both React Aria's and Remix's <Link />'s prop types, but <ReactAriaLink /> still doesn't pass Remix's <Link />'s props themselves.

Version

1.0.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS Sonoma 14.1.1

🧢 Your Company/Team

https://verveui.pro/

🕷 Tracking Issue

No response

[andrecasal]

Maybe if the <Link /> component supported composition, something like this would work?

import { NavLink } from '@remix-run/react'
import { Link as ReactAriaLink } from 'react-aria-components'

// Elsewhere
<ReactAriaLink asChild>
	<NavLink to="some_route" prefetch="intent">
		{children}
	</NavLink>
</ReactAriaLink>

[snowystinger]

Closing as a dupe, see #5476 (comment)