What a route module exports
A route file is a module whose exports are the route's options.
A route file is a module whose exports are the route's options. The generated route tree reads these names; any other export is yours.
| Export | Type | What it does |
|---|---|---|
default |
component | Renders the route. Read data with the hooks, not props. Loaded lazily in the browser |
pending |
() => JSX |
Shown while navigating into the route after pendingMs (1000 ms) when its data is not cached, for at least pendingMinMs (500 ms). Lazy |
error |
({ error, reset, retry }) => JSX |
Replaces the route when its loader or component throws; resets on navigation. reset rebuilds it, retry revalidates its loaders first. Lazy |
notFound |
() => JSX |
Rendered in place of this route (its default is not rendered, its ancestors are) when notFound() is thrown at or below it. Lazy |
validateSearch |
(search) => S |
Parses and validates ?query. A throw fails the navigation |
loaderDeps |
(search) => unknown |
Extra key for the loader cache, computed from the validated search |
beforeLoad |
(args) => context |
Runs top-down before the loaders; may add context, throw redirect() or notFound() |
loader |
(args) => data |
Loads the route's data. Loaders run in parallel. Read it with useLoaderData() |
head |
({ params, loaderData }) => HeadTag[] |
Document head tags for the route |
tags, staleReload |
string[], "blocking" | "background" |
Invalidation tags and the refresh policy; see Routing |
ssr, prerender |
literal | Where the route renders and what the build prerenders, see Prerendering and the ssr flag |
dynamicParams |
literal | false: a param the page's prerender export does not list is not found. See Params the page does not list |
The route options keep their router meaning. beforeLoad and loader receive { params, search, context, location, intent, signal }; loader also gets deps. signal aborts when a newer navigation replaces the current one.
What is bundled where. The build splits each route file in two. The data half (loader, beforeLoad,
validateSearch, head, and everything they import) is in the first client bundle, because the router needs it to
match and load. The UI half (default, pending, error, notFound) is a separate chunk that is loaded when the
route is about to render; the server lists it in a modulepreload link. A file is left whole, with the UI in the
first bundle, when splitting would duplicate state: it has no UI export, an export *, other top-level side effects,
a mixed export, or a module-level declaration that both halves use.
Early Hints. The chunks above are also sent ahead of the page. A page response carries a Link header with the
stylesheets, the entry script and the matched routes' preloads; on the Node server (and the Node layout of Tarout) the
same links go out first in a 103 Early Hints response, before any loader runs, so the browser fetches them while the
page renders. Only same-origin paths are sent, at most 8, only to a browser navigation, and not for a route rule with csr: false. Other adapters
send the final Link header only. See Early Hints and, for the compression of the page
itself, Compression, including the filter that keeps a response with a secret out of
compression (BREACH).
Segment exports Dusk does not support (G-B10)#
Dusk does not support the segment-config exports of other frameworks: dynamic, runtime and fetchCache
(dynamicParams is supported, with its own rules; see Params the page does not list).
A file (page, layout or API route) that exports one fails the scan with ROUTE_EXPORT_UNSUPPORTED, which
names the export and what to use instead. The supported ones are revalidate or cache (how long a response is
reused), ssr or prerender (how a page renders and what is built ahead), and the data cache helpers for fetched data.
Other text is not checked: a local const dynamic, a longer name such as dynamicLabel, and a comment that mentions
dynamic all pass.
// Exporting `dynamic` here fails the scan (ROUTE_EXPORT_UNSUPPORTED). Keep only the supported exports.
export const revalidate = 60; // the page is reused for 60 seconds
export default function Digest() {
return <p>digest</p>;
}