Navigation

The Link component

<Link> performs client-side navigation — no full page reload. It renders a real anchor, so modified clicks (new tab, etc.) still work.

JSX

import { Link } from "@opentf/web";

<Link href="/about">About</Link>

The router

The global router is reactive — read its fields directly (no .value):

JSX

import { router } from "@opentf/web";

<nav class={router.pathname === "/" ? "home" : ""}>…</nav>

Member	Description
`router.pathname`	Current path (reactive).
`router.params`	Dynamic route params (reactive).
`router.query`	Parsed query string (reactive).
`router.locale`	Active locale when i18n is enabled, else `null` (reactive).
`router.push(path)`	Navigate, pushing a history entry.
`router.replace(path)`	Navigate, replacing the current entry.

Reactive reads

Reading router.pathname inside a binding (an attribute or {} expression) updates the UI automatically when the route changes.

When i18n is enabled, the locale lives in the URL path and <Link> automatically keeps navigation in the active locale. Build a localized URL yourself with localizePath — handy for a language switcher:

JSX

import { Link, localizePath, router } from "@opentf/web";

// The current page under another locale:
<Link href={localizePath(router.pathname, "fr")}>Français</Link>

See the Locale Routing guide for the full model (prefix_except_default, per-locale SSG/SSR, detection), and the @opentf/web API reference for localizePath, setLocale, and the other locale exports.

The Link component

The router

Localized navigation