ページと definePage

ページの唯一の要件は default export。definePage でタイトルと説明を静的に付与する。

唯一の要件は default export

Vantage のページに必要なのは、React コンポーネントの default export だけです。

export default function MonthlyAnalysis() {
  return <h1>月次分析</h1>;
}

default export が無いページは vantage check が MISSING_DEFAULT_EXPORT エラーで指摘します。

definePage でメタデータを付ける

タイトルや説明を付けたいときは definePage を使います。任意です。

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

export const page = definePage({
  title: "月次分析 · Acme Analytics",
  navLabel: "月次分析",
  description: "売上と主要指標の月次サマリー",
});

export default function MonthlyAnalysis() {
  return <h1>月次分析</h1>;
}

title は document.title を駆動します（末端のルートマッチのタイトルが使われ、無ければドキュメント初期の <title> にフォールバック）。
navLabel は useRoutes() で組むナビの表示名です。省略すると title が使われます。title にサイト名を含めるときに分けます。
title/description/navLabel は 生成時に静的に読まれます。Vantage はページを実行して読むのではなく、ソースを静的に解析します。したがって値はリテラルにしてください。

Fast Refresh との関係

page のような非コンポーネントのエクスポートがあっても、Vantage はそれを内部で扱うため React Fast Refresh は生き残ります。ページ本体を編集しても、state を保ったまま更新されます。

プロトタイプの制約

definePage は pendingComponent / errorComponent / validateSearch も型として受け付けますが、現行プロトタイプでは lazy ルートにまだ結線されていません。ページごとの pending/error UI の上書きは未実装で、フレームワーク共通のデフォルトが描画されます。

次に読む

データ取得 — サーバー状態を扱う