Layout
Page コンポーネントとネストされた Layout コンポーネントを LayoutRouter のルートツリーへとまとめる Layout コンポーネント
Layout は、ページ（およびネストされた Layout）をまとめて、LayoutRouter のための階層的なルートを組み立てます。
import { Layout, Page } from "narraleaf-react";基本的な使い方
<Layout name="home">
{/* /home */}
<Page name={null}>
<Home />
</Page>
{/* /home/detail */}
<Page name="detail">
<Detail />
</Page>
</Layout>Props
| Prop | 型 | 説明 |
|---|---|---|
name | string | このレイアウトが扱う相対パスのセグメント、またはパターン。静的な文字列、動的パラメータ（:id）、ワイルドカード（*）をサポートします。 |
propagate? | boolean | true の場合、退場アニメーションがネストされた AnimatePresence へ伝播します。既定値は game.config.animationPropagate。 |
children | React.ReactNode | 子要素の Layout または Page コンポーネント。 |
ネストされたレイアウト
レイアウトはネストして、深いルートを構成できます。
<Layout name="user">
<Layout name=":id">
<Page name={null}> // /user/:id
<UserHome />
</Page>
<Page name="profile"> // /user/:id/profile
<UserProfile />
</Page>
</Layout>
</Layout>ルール
Layoutの直接の子要素にできるのはLayoutまたはPageコンポーネントのみです。Pageコンポーネントの内部にLayoutを置いてはいけません。- ネストされた
LayoutやPageのnameは、親のLayoutのパスからの相対値です。