diff --git a/apps/documentation/src/components/sidebar/config.ts b/apps/documentation/src/components/sidebar/config.ts index 58367e01..ad8cd663 100644 --- a/apps/documentation/src/components/sidebar/config.ts +++ b/apps/documentation/src/components/sidebar/config.ts @@ -111,6 +111,11 @@ export const sidebarElements: Array = [ label: 'Defining routes', href: '/documentation/routing/defining-routes', }, + { + type: 'element', + label: 'Link and navigation', + href: '/documentation/routing/link-and-navigation', + }, { type: 'element', label: 'Pages', @@ -131,11 +136,6 @@ export const sidebarElements: Array = [ label: 'Layouts', href: '/documentation/routing/layouts', }, - { - type: 'element', - label: 'Link and navigation', - href: '/documentation/routing/link-and-navigation', - }, { type: 'element', label: 'Redirecting', diff --git a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx index 35c07f1c..f0f89070 100644 --- a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx +++ b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx @@ -11,4 +11,54 @@ import Breadcrumbs, { Element } from '@/components/breadcrumbs' # Link and navigation -Todo +The Tuono router allows you to do client-side route transitions between pages, similar to a single-page application. + +A React component called `Link` is provided to do this client-side route transition. + +```tsx +import { Link } from 'tuono' + +export default function HomePage() { + return ( + + ) +} +``` + +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` + +Any `` in the viewport will be prefetched by default when it will appear within the viewport. +The corresponding data for server-rendered routes is fetched only when the `` is clicked. + +## The useRouter hook + +The `Link` component should be able to cover most of your routing needs, +but you can also do client-side navigations without it using the `useRouter` hook. + +```tsx +import { useRouter } from 'tuono' + +export default function GoToAboutPage() { + const router = useRouter() + + return ( + + ) +} +``` diff --git a/spelling_global.txt b/spelling_global.txt new file mode 100644 index 00000000..5f18fbb4 --- /dev/null +++ b/spelling_global.txt @@ -0,0 +1 @@ +Tuono tuono tsx