Using Link from react-aria-components vs. Link from @remix-run/react

[lensbart]

I’m starting out with react-aria-components, and am wondering what the tradeoff is between both Link components mentioned in the title, and/or if there is an example implementation where Link from @remix-run/react is combined with some hooks from react-aria.

Thanks in advance for enlightening me!

[sergiodxa]

The Link from Remix will perform a client side navigation and let you prefetch the assets and data of the linked route.

The link from React Aria I imagine has some JS to fix some a11y issues, but it works as a normal anchor tag.

[lensbart]

Thanks for the very quick response, @sergiodxa. This helped to clear things up. I will use Link from @remix-run/react then.

I was looking to combine this with the useFocus hook from react-aria, to get similar focus behaviour as other elements from react-aria-components. But I am now arriving at the conclusion that I might be overthinking things, and a simple focus style using the CSS focus: selector might do the trick. This CSS selector should match the behavior of useFocus anyway.

[goonerDp]

@lensbart it looks like the remix router can be integrated with react-aria-components Link.
https://react-spectrum.adobe.com/react-aria/routing.html#router-options
https://react-spectrum.adobe.com/react-aria/routing.html#remix