Preventing navigation on Link (React Aria Components) on press.

[ryanelian]

Hi,

I am using the Link component from React Aria Components and provided the href prop to the component.

However, I want to prevent normal navigation when the user clicks the link (when client-side routing is about to happen) and instead perform some data prefetching. Additionally, I would like to disable the link and show a loader animation. Of course for accessibility reason, this behavior would not occur when the user clicks the link using modifier keys that open the link in a new tab or window.

How can I accomplish this? I noticed that when I add both href and onPress props to the component, it still navigates away.

Thanks.

[snowystinger]

Looks like there are some conditions which will preventDefault, would using it in this way work for you?

react-spectrum/packages/@react-aria/link/src/useLink.ts

Line 84 in 2bda4c9

!router.isNative &&

These are outlined in our documentation here https://react-spectrum.adobe.com/react-aria/Link.html#client-side-routing which would probably be easier to follow