Link

A semantic element for navigation between pages.

Notes

There are 3 types of links: a plain old <a> tag, your framework's <Link /> component, and React Aria's <Link /> component. Let's take a look at each one.

Plain old <a> tags

Plain old <a> tags should be used when linking outside your app.

Your framework's <Link /> component

Your framework's <Link /> component should be used when linking inside your app. This component is responsible for:

• doing an internal pushState
• resolving relative route paths
• prefetching app assets
• adding active/pending styles/classes
• adding location.state

None of which have anything to do with an <a> that links to an external route. You can't pushState to a different origin, resolve relative paths, prefetch, add location state, or add active/pending styles when going there. For those, you'll need to use a plain old <a> tag, instead of you framework's <Link> component.

This being said, most frameworks's <Link /> components (like Next and Remix) detects whether the link is internal or external so you don't need to remember to either use a plain-old <a> tag or your framework's <Link /> component depending on whether your link is internal or external. Just use your frameworks's <Link /> and it will do the right thing.

React Aria's <Link /> component

React Aria also has its own <Link /> component with its own functionality.

Unfortunately complete integration between your framework's <Link /> and React Aria's <Link /> is a hard problem that isn't yet solved. We can't yet have React Aria <Link />'s with prefetching in Remix, for example.

But we can have partial integration, insofar as we can get React Aria <Link /> to use client-side routing, as opposed to a full-page reload - which is what happens when you use a React Aria <Link /> without any integration. So please follow this guide to integrate React Aria links with your framework.

State of the art

So we can't yet have a unified <Link /> component.

The <Link /> component described in this page is your framework's <Link /> component which will be used to navigate around your app (and outside it).

You'll be implicitly using React Aria's <Link /> when importing from components that have links. For example, the <Breadcrumbs /> component has a <BreadcrumbsLink /> component that's just a React Aria's <Link /> component under the hood. Just keep in mind that, unlike this <Link />, those links won't be able to do framework-specific things like prefetching or supporting functional props. At least not yet.

Features

The features of this component are dependent on your framework of choice. If you have a choice between choosing a <Link /> component and a navigation-aware <NavLink />, choose the <NavLink /> so you can take advantage of the active/pending states.

Usage

<P>
	<Link to="/components/navigation/link" prefetch="intent">
		{({ isActive }) => (isActive ? 'This is active link' : 'This is an inactive link')}
	</Link>{' '}
	while{' '}
	<Link to="/components/navigation/breadcrumbs" prefetch="intent">
		{({ isActive }) => (isActive ? 'this is active link' : 'this is an inactive link')}
	</Link>
</P>

Here's the <Link /> component in action, using the <NavLink /> component from Remix under the hood.

This is an inactive link while this is an inactive link

Source

Styling

/* ### Navigation ### */
@layer components {
	.link {
		@apply underline;
	}
}