Pages

Pages serves as the routing coordinator within an App, managing which Page displays based on the current URL.

Key features:

Route coordination: Automatically displays the correct Page based on current URL and navigation
Default route handling: Sets the initial page shown when the application loads
Client-side routing: Manages navigation without page refreshes or server requests

Using the Pages and Page components

The Page component has a property called url. This is the route associated with the Page's contents. You can provide a link to this route to display a particular Page. Currently, all navigation is done on the clientside. No page is fetched from the server, thus the application operates as a Single Page Application.

<App>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Account" to="/account" icon="user"/>
  </NavPanel>
  <Pages>
    <Page url="/">
      <Text>Hello App!</Text>
    </Page>
    <Page url="/account">
      <Text>This is the account page.</Text>
    </Page>
  </Pages>
</App>

Example: using Pages and Page

<App>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Account" to="/account" icon="user"/>
  </NavPanel>
  <Pages>
    <Page url="/">
      <Text>Hello App!</Text>
    </Page>
    <Page url="/account">
      <Text>This is the account page.</Text>
    </Page>
  </Pages>
</App>

Properties

`fallbackPath` (default: "/")

The fallback path when the current URL does not match any of the paths of the pages.

<App>
  <NavPanel>
    <NavLink label="Not Home" to="/not-home" icon="trash"/>
    <NavLink label="Home" to="/home" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/home">
    <Page url="/not-home">
      <Text>This is not home...</Text>
    </Page>
    <Page url="/home">
      <Text>Hello App!</Text>
    </Page>
  </Pages>
</App>

Example: fallbackPath

<App>
  <NavPanel>
    <NavLink label="Not Home" to="/not-home" icon="trash"/>
    <NavLink label="Home" to="/home" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/home">
    <Page url="/not-home">
      <Text>This is not home...</Text>
    </Page>
    <Page url="/home">
      <Text>Hello App!</Text>
    </Page>
  </Pages>
</App>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

This component does not have any styles.