useRoutePrefetch

declare function useRoutePrefetch(): (to: To) => void;

Returns a prefetch(to) callback that warms the route(s) a target location would render — without navigating there. It resolves to against the nearest <Routes> manifest, matches it, and for each matched route: runs its prefetch (data) and preloads its code chunk (a Loadable element via its static preload(), or a lazy route via its loader).

This is the programmatic counterpart to <RouterLink prefetch>: use it to warm the next step of a flow before you navigate to it.

import { useRoutePrefetch, useNavigate } from '@archibald/core';

function PlaceOrderButton() {
    const prefetch = useRoutePrefetch();
    const navigate = useNavigate();

    return (
        <button
            // Warm the thank-you page while the order request is in flight.
            onClick={async () => {
                prefetch('/thankyou');
                await placeOrder();
                navigate('/thankyou');
            }}
        >
            Place order
        </button>
    );
}

Behaviour

Opt-in. Nothing is prefetched unless you call the returned function.
Deduplicated. Prefetches go through the data client's cache, so repeated calls for the same target are cheap.
Manifest-scoped. It relies on a <Routes> ancestor publishing the route manifest via context; outside a <Routes> (or outside a <Router>) it is a no-op.
Also drives preload. With app.router.prerender: 'data', <RouterNavLink preload> warms routes through this same code path instead of rendering a hidden app tree.

tip

For simple link hovering you usually don't need this hook — reach for <RouterLink prefetch="intent">. Use useRoutePrefetch when the trigger is not a link (a button, a timer, an in-flight mutation, viewport visibility, …).

Behaviour​

Behaviour