NarraLeaf

页面(Page)

Page 组件,在 Layout 内渲染单个路由的内容,也可作为默认页面

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>

本页目录