页面(Page)
Page 用于在 Layout 内渲染单个页面内容。新版本通过 name 属性而非旧版 id 来标识页面。
import { Page } from "narraleaf-react";基本用法
// 默认页面(name = null)
<Page name={null}>
<Home />
</Page>
// 指定页面名
<Page name="detail">
<Detail />
</Page>当 name 为 null(或未传)时,该组件成为父 Layout 的 默认页面:当布局匹配且没有其他页面匹配时将会渲染它。
Props
| 属性 | 类型 | 说明 |
|---|---|---|
name? | string | null | 相对于父 Layout 的路径段;null / undefined 表示默认页面 |
children | React.ReactNode | 页面内容 |
组件已不再支持旧版的
id、className、style等属性,动效相关属性由框架内部管理。
嵌套规则
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>