Page
Layout の内部で単一のルートの内容を描画し、その既定のハンドラにもなり得る Page コンポーネント
Page は、Layout の内部で 1 つのページの内容を描画します。旧来の id prop ではなく name prop によって識別されます。
import { Page } from "narraleaf-react";基本的な使い方
// Default page for its parent Layout (name = null)
<Page name={null}>
<Home />
</Page>
// Explicit page name
<Page name="detail">
<Detail />
</Page>name が null（または省略）の場合、そのページは親の Layout の既定のハンドラになります。レイアウトがマッチし、同じレイアウト内の他のどのページもマッチしないときに描画されます。
Props
| Prop | 型 | 説明 |
|---|---|---|
name? | string | null | ページの相対パスのセグメント。null / undefined にすると、このページが既定のハンドラになります。 |
children | React.ReactNode | ページの内容 |
このコンポーネントは、旧来の
id、className、styleの各 prop をもう受け付けません。Motion props はフレームワークが内部で渡します。
ネストのルール
Pageの内部にLayoutをネストすることはできません。Pageの内部に別のPageを直接ネストすることはできません。- より深いディレクトリ構造を作るには
Layoutコンポーネントを使います。
Layout と組み合わせた例
import { Layout, Page } from "narraleaf-react";
<Layout name="user">
{/* /user */}
<Page name={null}>
<UserHome />
</Page>
{/* /user/profile */}
<Page name="profile">
<UserProfile />
</Page>
</Layout>