Link and navigation

The Tuono router facilitates client-side route transitions between pages, enhancing the user experience by:

• Enabling smooth navigation in single-page applications (SPAs)
• Preventing page reloads during site navigation

Tuono provides two choices for navigation between pages of your app:

• The Link component - used in place of an <a> tag
• The useRouter hook - used to programmatically change routes, or to access data about the current route

Use the <a> tag for navigating to other websites.

Tuono delivers this experience to users with the Link component provided from Tuono exports:

import { Link } from 'tuono'

export default function HomePage() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}

The example above uses multiple links. Each one maps a path (href) to a known route:

• / → src/routes/index.tsx
• /about → src/routes/about.tsx
• /blog/hello-world → src/routes/blog/[slug].tsx

For more information about this component visit the Link component API reference page.

The Link component is not suitable for programmatic navigation. To handle this, the library provides the useRouter hook.

For example, after a user submits a form and the API request succeeds, they can be redirected to another page:

import { useRouter } from 'tuono'

export default function GoToAboutPage() {
  const router = useRouter()

  return (
    <ProfileForm
      onUpdateSuccess={() => {
        router.push('/profile')
      }}
    />
  )
}

For more information about this hook visit the useRouter API reference page.