页面(Page)

Page 用于在 Layout 内渲染单个页面内容。新版本通过 name 属性而非旧版 id 来标识页面。

import { Page } from "narraleaf-react";

基本用法

// 默认页面(name = null)
<Page name={null}>
  <Home />
</Page>
 
// 指定页面名
<Page name="detail">
  <Detail />
</Page>

namenull(或未传)时,该组件成为父 Layout默认页面:当布局匹配且没有其他页面匹配时将会渲染它。

Props

属性类型说明
name?string | null相对于父 Layout 的路径段;null / undefined 表示默认页面
childrenReact.ReactNode页面内容

组件已不再支持旧版的 idclassNamestyle 等属性,动效相关属性由框架内部管理。

嵌套规则

  1. Layout 不能 嵌套在 Page 内。
  2. Page 之间也不能直接嵌套。
  3. 如需更深层级,请使用 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>