Link

A link allows a user to navigate to another page or resource within a web page or application.

import {Link} from './Link';

<Link
  href="https://www.imdb.com/title/tt6348138/"
  target="_blank">
  The missing link
</Link>

Client side routing

By default, links with an href are handled by the browser as regular page navigations. To integrate with a client side router, use the render prop to delegate to your router's link component. This supports features like prefetching on hover and avoids full page reloads.

import {Link} from 'react-aria-components/Link';
import NextLink from 'next/link';

<Link href="/about" render={props => <NextLink {...props} />}>
  About
</Link>

import {Link} from 'react-aria-components/Link';
import {Link as RouterLink} from 'react-router';

<Link href="/about" render={props => <RouterLink {...props} to={props.href} />}>
  About
</Link>

See the customization guide for more details on the render prop.

Events

Links without an href will be rendered as a <span role="link"> instead of an <a>. Use the onPress event to handle user interaction.

import {Link} from './Link';

<Link onPress={() => alert('Pressed link')}>Link</Link>

API

Default className: react-aria-Link