Components

Link

Overview

Tuono provides a Link component for clientside navigation between pages of your app. Link prefetches pages from any links above the fold, allowing for faster navigations without a full reload.

import { Link } from 'tuono'

export default function Page() {
  return <Link href="/page2">My Other Page</Link>
}

For navigating to pages outside of your app (other websites), you should use the <a> tag.

Additional considerations:

  • Any Link in the viewport is prefetched by default when it appears within the viewport.
  • The corresponding data for server-rendered routes is fetched only when the Link is clicked.

Reference

The Link component behaves similarly to the <a> HTML tag, with a few additional features controlled by the following props:

PropTypeDefault valueDescription
hrefstring (Required)-Relative path to the page in your application. Anchor names (links with hashtags) are also valid.
preloadbooleantrueWhether to preload the page if the link is within the viewport.
scrollbooleantrueWhether to preserve scroll position between navigations.
Edit page