Pages & definePage

A page's only requirement is a default export. Use definePage to attach a static title and description.

The only requirement is a default export

A Vantage page needs just one thing: a default-exported React component.

export default function MonthlyAnalysis() {
  return <h1>Monthly analysis</h1>;
}

A page without a default export is flagged by vantage check with a MISSING_DEFAULT_EXPORT error.

Attach metadata with definePage

To add a title or description, use definePage. It is optional.

import { definePage } from "@squadbase/vantage";

export const page = definePage({
  title: "Monthly analysis · Acme Analytics",
  navLabel: "Monthly analysis",
  description: "A monthly summary of revenue and key metrics",
});

export default function MonthlyAnalysis() {
  return <h1>Monthly analysis</h1>;
}

• title drives document.title (the deepest route match’s title wins; otherwise it falls back to the document’s initial <title>).
• navLabel is the name a nav built with useRoutes() renders. It defaults to title; set it separately when title carries the site name.
• title/description/navLabel are read statically at generation time. Vantage parses the source rather than executing your page, so keep the values literal.

Relationship to Fast Refresh

Even with a non-component export like page, Vantage handles it internally so React Fast Refresh survives. Editing a page body updates in place while preserving state.

Prototype limitations

definePage also accepts pendingComponent / errorComponent / validateSearch as types, but in the current prototype they are not yet wired into lazy routes. Per-page pending/error overrides are unimplemented — the framework’s shared defaults render instead.

What to read next

• Data fetching — handle server state