Linking and navigating

The Core Link component performs client navigation for internal destinations and keeps normal anchor behavior available to the browser. Use links for destinations and buttons for actions.

tsximport { Link } from "@tavojs/core/router";
import { Inline } from "@tavojs/ui";

export function ProjectNavigation() {
  return (
    <Inline as="nav" gap="md" aria-label="Projects">
      <Link to="/projects">All projects</Link>
      <Link to="/projects/active" scroll={false}>
        Active projects
      </Link>
    </Inline>
  );
}

The pages runtime matches the route, resolves middleware and loaders, updates metadata, announces the new page, restores focus, and coordinates scroll. When the target page exports pending, the URL changes first, middleware and layout loaders resolve, and the pending component renders inside those layouts while the page loader runs.

• Use scroll={false} only when preserving the current position is part of the interaction.

• Prefer route links over a second top-level standalone router.

• Without a pending export, the previous page remains visible and the route content region is marked busy until the target resolves.

• New routes start at the top, hashes target an element, and browser back or forward restores saved positions.

prefetchRoute can resolve a likely destination before the click without changing the URL or rendering the route's pending component. Use it for focused or hovered high-probability links, not every route in the application. getRouteStatus exposes idle, loading, prefetching, ready, redirecting, and error states without duplicating the router state machine.

tsimport { getRouteStatus, prefetchRoute } from "@tavojs/core/router";

export async function prefetchProjects() {
  await prefetchRoute("/projects");
  return getRouteStatus("/projects");
}