RouterLink

interface RouterLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
    reloadDocument?: boolean;
    replace?: boolean;
    state?: any;
    to: To;
    prefetch?: 'intent' | 'render' | 'none';
}

type To = string | Partial<Path>;

interface Path {
    pathname: string;
    search: string;
    hash: string;
}

A <RouterLink> is an element that lets the user navigate to another page by clicking or tapping on it. It renders an accessible <a> element with a real href that points to the resource it's linking to. This means that things like right-clicking a <RouterLink> work as you'd expect. You can use <RouterLink reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).

import { RouterLink } from '@archibald/core';

function UsersIndexPage({ users }) {
    return (
        <div>
            <h1>Users</h1>
            <ul>
                {users.map((user) => (
                    <li key={user.id}>
                        <RouterLink to={user.id}>{user.name}</RouterLink>
                    </li>
                ))}
            </ul>
        </div>
    );
}

A relative <RouterLink to> value (that does not begin with /) resolves relative to the parent route, which means that it builds upon the URL path that was matched by the route that rendered that <Link>.

replace

The replace property can be used if you'd like to replace the current entry in the history stack via history.replaceState instead of the default usage of history.pushState.

state

The state property can be used to set a stateful value for the new location which is stored inside history state. This value can subsequently be accessed via useLocation().

<Link to="new-path" state={{ some: 'value' }} />

You can access this state value while on the "new-path" route:

const { state } = useLocation();

reloadDocument

The reloadDocument property can be used to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).

prefetch

Warms the linked route before the user navigates — its data (via the route prefetch) and its code chunk (a Loadable element via its static preload(), or a lazy route via its loader) — so the target renders instantly on click. Under the hood it matches to against the nearest <Routes> manifest, the same mechanism as useRoutePrefetch.

Value	Behaviour
'none'	Never prefetch (default).
'intent'	Prefetch on hover, focus, or touchstart — i.e. as soon as the user signals intent to click.
'render'	Prefetch as soon as the link mounts. Use sparingly for high-confidence next steps.

Each distinct target is prefetched at most once, and prefetches are deduplicated by the data client's cache, so it is safe to enable on many links.

// Warm the cart route the moment the user hovers the cart link.
<RouterLink to="/cart" prefetch="intent">
    Cart
</RouterLink>

note

prefetch is a no-op outside a <Routes> (there is no manifest to match against) and when the link is external or uses reloadDocument.