Skip to content

動的ルート

/products/:id のようなルートは、PageFlow が id の安全な値を知るまで描画できません。dynamicParams で代表値を設定します。

ts
PageFlow.vite({
  dynamicParams: {
    '/products/:id': { id: 'demo-product' },
    '/users/:userId/orders/:orderId': {
      userId: 'alice',
      orderId: 'order-100',
    },
  },
})

マッチング

フレームワークアダプターが公開するルートパターンをオブジェクトのキーに使います。そのパターンで必要な名前付きパラメーターをすべて指定してください。

クエリ文字列とハッシュ

PageFlow は検出したクエリ文字列とハッシュを遷移位置として保持します。基礎となるルートを変えずに、タブ、フィルター、アンカーを表現できます。

text
/products/demo-product?tab=history#activity

サンプル値の選択

ローカル fixture またはテストデータにある安定した識別子を使います。本番顧客の ID や、初期化時に元へ戻せない書き込みを行うページは避けてください。

動的パラメーターは URL を組み立てるだけです。認証、認可、loader、アプリケーション検証を回避しません。

トラブルシューティング

  1. 設定キーがフレームワークのルートパターンと完全に一致するか確認します。
  2. 必須パラメーターをすべて指定します。
  3. 同じブラウザーセッションで生成 URL を直接開きます。
  4. 認証または loader がリダイレクトしていないか確認します。

MIT ライセンスで公開されています。