docs(react-router): update custom-link guide for react-aria (#4757)

As of [React Aria Components
v1.11.0](https://react-spectrum.adobe.com/releases/2025-07-22.html), we
now pass through DOM events, so it's no longer necessary to use hooks to
create a custom link component. You can just use `createLink` with the
React Aria component directly.


[Demo](https://stackblitz.com/edit/stackblitz-starters-qc66mmzn?file=src%2FLink.tsx)

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: devongovett

docs/router/framework/react/guide/custom-link.md

@@ -53,59 +53,38 @@ Here are some examples of how you can use `createLink` with third-party librarie
 
 ### React Aria Components example
 
-React Aria Components'
-[Link](https://react-spectrum.adobe.com/react-aria/Link.html) component does not support the standard `onMouseEnter` and `onMouseLeave` events.
-Therefore, you cannot use it directly with TanStack Router's `preload (intent)` prop.
-
-Explanation for this can be found here:
-
-- [https://react-spectrum.adobe.com/react-aria/interactions.html](https://react-spectrum.adobe.com/react-aria/interactions.html)
-- [https://react-spectrum.adobe.com/blog/building-a-button-part-2.html](https://react-spectrum.adobe.com/blog/building-a-button-part-2.html)
-
-It is possible to work around this by using the [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) hook from [React Aria Hooks](https://react-spectrum.adobe.com/react-aria/hooks.html) with a standard anchor element.
+React Aria Components v1.11.0 and later works with TanStack Router's `preload (intent)` prop. Use `createLink` to wrap each React Aria component that you use as a link.
 
 ```tsx
-import * as React from 'react'
-import { createLink, LinkComponent } from '@tanstack/react-router'
-import {
-  mergeProps,
-  useFocusRing,
-  useHover,
-  useLink,
-  useObjectRef,
-} from 'react-aria'
-import type { AriaLinkOptions } from 'react-aria'
-
-interface RACLinkProps extends Omit<AriaLinkOptions, 'href'> {
-  children?: React.ReactNode
-}
+import { createLink } from '@tanstack/react-router'
+import { Link as RACLink, MenuItem } from 'react-aria-components'
 
-const RACLinkComponent = React.forwardRef<HTMLAnchorElement, RACLinkProps>(
-  (props, forwardedRef) => {
-    const ref = useObjectRef(forwardedRef)
+export const Link = createLink(RACLink)
+export const MenuItemLink = createLink(MenuItem)
+```
 
-    const { isPressed, linkProps } = useLink(props, ref)
-    const { isHovered, hoverProps } = useHover(props)
-    const { isFocusVisible, isFocused, focusProps } = useFocusRing(props)
+To use React Aria's render props, including the `className`, `style`, and `children` functions, create a wrapper component and pass that to `createLink`.
 
-    return (
-      <a
-        {...mergeProps(linkProps, hoverProps, focusProps, props)}
-        ref={ref}
-        data-hovered={isHovered || undefined}
-        data-pressed={isPressed || undefined}
-        data-focus-visible={isFocusVisible || undefined}
-        data-focused={isFocused || undefined}
-      />
-    )
-  },
-)
+```tsx
+import { createLink } from '@tanstack/react-router'
+import { Link as RACLink, type LinkProps } from 'react-aria-components'
 
-const CreatedLinkComponent = createLink(RACLinkComponent)
+interface MyLinkProps extends LinkProps {
+  // your props
+}
 
-export const CustomLink: LinkComponent<typeof RACLinkComponent> = (props) => {
-  return <CreatedLinkComponent preload={'intent'} {...props} />
+function MyLink(props: MyLinkProps) {
+  return (
+    <RACLink
+      {...props}
+      style={({ isHovered }) => ({
+        color: isHovered ? 'red' : 'blue',
+      })}
+    />
+  )
 }
+
+export const Link = createLink(MyLink)
 ```
 
 ### Chakra UI example