Documentation
Player
Page Router
Page

Page

Page renders the content of a single page inside a Layout. It is identified by the name prop instead of the old id prop.

import { Page } from "narraleaf-react";

Basic usage

// Default page for its parent Layout (name = null)
<Page name={null}>
  <Home />
</Page>
 
// Explicit page name
<Page name="detail">
  <Detail />
</Page>

When name is null (or omitted), the page becomes the default handler of its parent Layout: it is rendered whenever the layout matches and no other page in the same layout matches.

Props

PropTypeDescription
name?string | nullRelative path segment of the page. null / undefined makes this page the default handler.
childrenReact.ReactNodePage content

The component no longer accepts the legacy id, className, or style props. Motion props are passed internally by the framework.

Nesting rules

  1. Layout cannot be nested inside a Page.
  2. Another Page cannot be nested directly inside a Page.
  3. Use Layout components to create deeper directory structures.

Example with Layout

import { Layout, Page } from "narraleaf-react";
 
<Layout name="user">
  {/* /user */}
  <Page name={null}>
    <UserHome />
  </Page>
 
  {/* /user/profile */}
  <Page name="profile">
    <UserProfile />
  </Page>
</Layout>
LayoutDialog