页面(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>