# Link (https://docs.salla.dev/twilight/react/components/link)



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.

<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

## Example [#example]

```tsx title="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 [#api]

```ts
const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
```

| Prop          | Type                                   | Description                                                             |
| ------------- | -------------------------------------- | ----------------------------------------------------------------------- |
| `to?`         | `string`                               | Destination path. Falls back to `href`, then `"/"`.                     |
| `href?`       | `string`                               | Alternative to `to`.                                                    |
| `preload?`    | `"intent" \| "render" \| false`        | When to preload the target: on hover or focus, when rendered, or never. |
| `replace?`    | `boolean`                              | Replace the current history entry instead of adding one.                |
| `className?`  | `string`                               | Class name.                                                             |
| `style?`      | `CSSProperties`                        | Inline styles.                                                          |
| `title?`      | `string`                               | Title attribute.                                                        |
| `target?`     | `string`                               | Anchor target.                                                          |
| `rel?`        | `string`                               | Anchor rel.                                                             |
| `onClick?`    | `MouseEventHandler<HTMLAnchorElement>` | Click handler.                                                          |
| `aria-label?` | `string`                               | Accessible label.                                                       |
| `itemProp?`   | `string`                               | Microdata attribute.                                                    |
| `children?`   | `ReactNode`                            | Link content.                                                           |

## Gotchas [#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 [#next]

* [Routes and pages](https://docs.salla.dev/twilight/react/guide/routes-and-pages) shows which paths exist.
* [`Image`](https://docs.salla.dev/twilight/react/components/image) for pictures.
* [Layout and components](https://docs.salla.dev/twilight/react/guide/layout-and-components)