Guides

クライアントナビゲーション

リンクによる移動、共有 Layout の状態保持、Page アニメーションの設定。

通常のリンクで、共有 Layout を維持したまま Page を切り替えられます。

登録済みのページへはアンカーで移動します。

<a href="/settings">Settings</a>

検索欄などの状態をページ間で保持するには、共有 Layout に配置してください。対応ブラウザーでは、既定で Page がフェードし、共有 Layout はアニメーションの対象外です。

Page のアニメーションを無効にする

以下の抜粋では、./effront の共有ファクトリー EFFRONT と、./routes の登録済みのルート定義を使います。

Page 定義:

import { Effect } from "effect";
import { EFFRONT } from "./effront";

export const SettingsPage = EFFRONT.Page.make({
  viewTransition: false,
  render: () => Effect.succeed(<h1>Settings</h1>),
});

SettingsPage を Routes.page で登録してください。リンクから登録先の URL へ移動すると、Settings 自体の Page アニメーションは発生しません。

アプリケーション全体のアニメーションを無効にする

アプリケーション定義:

import { PageViewTransition } from "@effront/core";
import { Layer } from "effect";
import { EFFRONT } from "./effront";
import { routes } from "./routes";

export default EFFRONT.make({
  routes,
  layer: Layer.succeed(PageViewTransition, { enabled: false }),
});

Page 側で明示的に有効にしない限り、Page アニメーションなしで切り替わります。 Settings だけアニメーションを有効にするには、Page 定義を置き換えます。

export const SettingsPage = EFFRONT.Page.make({
  viewTransition: { enabled: true },
  render: () => Effect.succeed(<h1>Settings</h1>),
});

対応ブラウザーでは、動きを減らす設定が無効なら Settings のアニメーションを利用できます。独自のアニメーションやその他の設定は PageViewTransition リファレンスを参照してください。

内容が届くまで読み込み UI を表示する

遷移先は、内容の読み込みが完了する前に表示される場合があります。内容が届くまで Loading または Suspenseを表示してください。ストリーミング中に失敗し得る内容には React Error Boundaryを追加してください。 URL の更新タイミングとキャンセルの動作は画面表示とストリームの完了を参照してください。

戻る・進むと再読み込み