Router
preloadRoute
Warm the route chunk cache before navigation — complements Link prefetch.
preloadRoute
preloadRoute matches a URL against the generated route manifest and starts loading that route's lazy chunk without navigating. <Link> already prefetches on hover/focus; use this when you want the same behavior from gestures, viewport observers, or other UX triggers.
import { preloadRoute } from 'manicjs/router';Signature
function preloadRoute(path: string): void;- Browser only — no-op when
windowis missing or__MANIC_ROUTES__is not installed yet. - Uses the same route registry as the runtime router (static segments beat dynamic; catch-all last).
- If the matched chunk is already cached, it does nothing extra.
When to use it
| Scenario | Pattern |
|---|---|
| Prefetch on scroll into view | IntersectionObserver → preloadRoute('/heavy/page') |
| Warm next step in a wizard | After step 1 mounts, call preloadRoute for step 2 |
| Keyboard shortcuts | Before showing a modal that navigates away |
<Link prefetch> covers hover/focus; preloadRoute is for everything else.
Example
// @errors: 2322
import React, { useEffect, useRef } from 'react';
import { preloadRoute } from 'manicjs/router';
export function PrefetchWhenVisible({ href }: { href: string }) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const el = ref.current;
if (!el || typeof IntersectionObserver === 'undefined') return;
const io = new IntersectionObserver(
entries => {
if (entries.some(e => e.isIntersecting)) preloadRoute(href);
},
{ rootMargin: '200px' }
);
io.observe(el);
return () => io.disconnect();
}, [href]);
return <div ref={ref}>{/* promoted content */}</div>;
}See also
- Link — built-in prefetch on hover/focus
- Router overview — how chunks and
__MANIC_ROUTES__fit together