The Link component wraps each framework's native router link with compile-time route validation. It knows your complete route structure and parameters, delivering autocomplete and type checking throughout navigation code.

The component is available at components/Link.{tsx,vue,svelte} in your source folder.

Usage

The API is consistent across all frameworks - a to prop accepting a typed tuple, an optional query prop for search parameters, and standard router props passed through:

// Menu.tsx
import Link from "~/components/Link";

export default function Menu() {
  return (
    <nav>
      {/* Navigate to a static route */}
      <Link to={["index"]}>Home</Link>

      {/* Navigate with a required parameter */}
      <Link to={["users/[id]", 123]}>User Profile</Link>

      {/* Navigate with a parameter and query string */}
      <Link to={["posts/[slug]", "hello-world"]} query={{ ref: "sidebar" }}>
        Blog Post
      </Link>
    </nav>
  );
}

LinkProps Type

The to prop is typed as LinkProps - a discriminated union derived from your route structure:

export type LinkProps =
  | ["index"]
  | ["users/[id]", id: string | number]
  | ["posts/[slug]", slug: string]
  // ... all other routes

Typing the first array element triggers TypeScript's IntelliSense with valid route suggestions. Selecting a parameterized route requires providing those parameters as subsequent array elements - the type system enforces this.

Renaming a route directory produces TypeScript errors at every Link referencing the old name, turning refactors into an automated checklist.