Route module

A page module is the file a route's lazy(() => import(...)) points at. It default-exports the page component and may export a route object with the page's loader, metadata, breadcrumb and not-found screen. This page lists what that object accepts. For a walkthrough, see Add a route.

import type { PluginRoutePageProps } from '@vitnode/core/routing'

import { defineRoute } from '@vitnode/core/tanstack/plugin-routes'

export const route = defineRoute({
  load: async ({ params }) => ({ id: params.id }),
  head: ({ loaderData }) => ({ title: `Note ${loaderData?.id ?? ''}` }),
})

const NotePage = ({ loaderData }: PluginRoutePageProps<{ id: string }>) => (
  <h1>Note {loaderData.id}</h1>
)

export default NotePage

Pick a helperCopy Anchor Link

All four helpers return the object unchanged. They exist to type load's context by what the route earned in routes.ts.

• queryClient is the app's TanStack Query client. Warm the page's data with context.queryClient.query({ ...options, staleTime: 'static' }), so a preload and the click that follows share one request. See Cache app data.
• auth is the signed-in visitor's session, already checked by the requires guard, so context.auth.user is never null. See Protected routes.
• adminAccess is the AdminCP session state resolved by the AdminCP shell.

A route that did not declare requires or area: 'admin' cannot ask for auth or adminAccess. The field is a type error rather than undefined at runtime.

definePluginRoute works too, but a loader without queryClient fetches directly, and the router runs it again on every hover preload. Prefer defineRoute in a VitNode app.

OptionsCopy Anchor Link

load argumentsCopy Anchor Link

Throw notFound() or redirect() from @tanstack/react-router to answer with a 404 or a redirect instead of the page.

head arguments and resultCopy Anchor Link

head receives loaderData (possibly undefined), params, search and t, and returns:

Return only these fields. VitNode turns them into the full set of tags with the app's site metadata.

Translated metadataCopy Anchor Link

head and load run outside the React tree, so useTranslations cannot reach them. Both receive t instead, a translator over the namespaces the route declared in messages. Keys are full dotted paths, namespace included:

export const route = defineRoute({
  head: ({ t }) => ({
    title: t('site-notes.notes.title'),
  }),
})

A component scopes itself once with useTranslations('site-notes.notes') and then calls t('title'). In head there is no component to scope, so you spell out the whole key. Placeholders work as they do in a component. Pass the values as the second argument, t(key, { name: 'Ada' }).

The namespaces have already loaded by the time head runs, so translating metadata costs no extra request. Calling t on a route that declares no messages throws and names the namespace to add, so a raw key never ends up in a <title>.

Page propsCopy Anchor Link

The default export receives PluginRoutePageProps<TData, TSearch>:

A layout's default export receives the same props plus children. See Layouts.