Pages

In MWAP a page is represented by an array of page definitions exported from pages/index.ts, pages/index.tsx, pages/index.js or pages/index.jsx.

Pages are defined as a React Component and a few simple properties:

import type { ComponentType } from "react";

// import type { Page } from "mwap";
export type Page = {
  /**
   * A React component to render only when
   * the location matches.
   */
  component: ComponentType;
  /**
   * When true, will only match if the path
   * matches the location.pathname exactly.
   */
  exact?: boolean;
  /**
   * Any valid URL path or array of paths that
   * path-to-regexp@^1.7.0 understands.
   */
  path: string;
};

Any other component defined in the pages directory will be automatically code-split via @mwap/async. This means you can use standard import statements in your pages/index.xx file leaving it looking like:

import type { Page } from "mwap";

import Home from "./home";
import Post from "./post";

const pages: Page[] = [
  {
    component: Home,
    exact: true,
    path: "/",
  },
  {
    component: Post,
    path: "/post/:id",
  },
];

export default pages;

For more information on what to do next, we recommend the following sections:

Pages

Related