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