Linking & Navigating

Client-side navigation with hover-intent prefetch and view transitions.

Use GioLink for internal navigation. It prefetches on hover intent by default and swaps content without a full reload. Set prefetch="viewport" to instead prefetch once when the link scrolls into view (via IntersectionObserver), or prefetch={false} to disable prefetching.

import { GioLink } from '@gio.js/react';

<GioLink href="/about">About</GioLink>
<GioLink href="/posts/1" prefetch="viewport">First post</GioLink>

View transitions

Set a transition preset to animate between pages using the View Transitions API.

<GioLink href="/about" transition="fade">About</GioLink>

Typed routes

The href() helper builds URLs from your route patterns with full type checking. At every server start GioJS generates .gio/routes.d.ts from the discovered routes; the file augments @gio.js/react (its GioRegisteredRoutes interface, via declaration merging), so patterns autocomplete and params typecheck with zero annotations in your code.

import { GioLink, href } from '@gio.js/react';

// '/posts/:id' autocompletes from your app/ directory.
// A wrong pattern or a missing/misspelled param is a type error.
<GioLink href={href('/posts/:id', { id: post.id })}>{post.title}</GioLink>

href('/about');                        // static routes take no params
href('/docs/*rest', { rest: 'a/b' });  // catch-all keeps its slashes

Param values are URL-encoded per segment (a catch-all value keeps its / separators). Projects scaffolded by create-giojs already include the generated file in their tsconfig; in an existing project, add ".gio/routes.d.ts" to the include array of tsconfig.json.