Twilight
GuideEngineRoutesAPIsLocal developmentRecipes

Link

A router-aware link that moves between theme pages without a full page reload.

Use Link for every link to another page of your theme. The customer moves between pages without a full reload, and the target can be preloaded.

Framework: TanStack Start

This page is written for TanStack Start, the default and currently supported framework. See what depends on the framework.

Example

app/components/home/BrandLink.tsx
import { Link } from '@salla.sa/twilight-theme-engine/common';

export function BrandLink({ id, name }: { id: number; name: string }) {
  return (
    <Link to={`/brands/${id}`} preload="intent" className="brand">
      {name}
    </Link>
  );
}

API

const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
PropTypeDescription
to?stringDestination path. Falls back to href, then "/".
href?stringAlternative to to.
preload?"intent" | "render" | falseWhen to preload the target: on hover or focus, when rendered, or never.
replace?booleanReplace the current history entry instead of adding one.
className?stringClass name.
style?CSSPropertiesInline styles.
title?stringTitle attribute.
target?stringAnchor target.
rel?stringAnchor rel.
onClick?MouseEventHandler<HTMLAnchorElement>Click handler.
aria-label?stringAccessible label.
itemProp?stringMicrodata attribute.
children?ReactNodeLink content.

Gotchas

  • Use Link for pages inside the theme. For external addresses, use a plain <a>.
  • Only the props above are typed. Other anchor attributes are not part of the public type.
  • Link adds a data-spa-link attribute, and it needs the Twilight provider above it (your root route already has it).
  • A plain <a href> inside your theme still works, but it reloads the whole page. The built-in ProductCard uses plain anchors for product links.

Next

Image

An image that lazy-loads, resizes through the CDN and reserves space to avoid layout shift.

Modal

A dialog with a backdrop, Escape to close, focus return and body scroll lock.

On this page

ExampleAPIGotchasNext