File-system routing

Generate routes from src/pages/ with the pages plugin.

The pages plugin scans src/pages/, wraps layouts, and generates a router. Pick the entry for your toolchain:

Setup

import const pages: (options?: IlhaPagesOptions) => Plugin
Vite plugin — use via `@ilha/router/vite`.pages from "@ilha/router/vite";
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.defineConfig } from "vite";

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.defineConfig({
  UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.plugins: [function pages(options?: IlhaPagesOptions): Plugin
Vite plugin — use via `@ilha/router/vite`.pages()],
});

File names

foo.server.tsx uses the same URL as foo.tsx and renders on the server. See Server islands.

Page module

Export a default component:

import { head } from "@ilha/router";

export default function Home() {
  head({ title: "Home" });
  return <h1>Home</h1>;
}

Layout

import type { type View = VNode | UnsafeHtml | JsonText | AtomHandle<unknown> | Stream<View, unknown, unknown> | Component | View[] | Iterable<View>View } from "ilha";

export default function 
function Layout({ children }: {
    children?: View;
}): ViewLayout({ children: Viewchildren }: { children?: Viewchildren?: type View = VNode | UnsafeHtml | JsonText | AtomHandle<unknown> | Stream<View, unknown, unknown> | Component | View[] | Iterable<View>View }) {
  return (
    <JSX.IntrinsicElements.div: HTMLAttributes<HTMLDivElement>div>
      <JSX.IntrinsicElements.nav: HTMLAttributes<HTMLElement>nav>
        <JSX.IntrinsicElements.a: AnchorHTMLAttributesa href?: Attrhref="/">Home</JSX.IntrinsicElements.a: AnchorHTMLAttributesa>
      </JSX.IntrinsicElements.nav: HTMLAttributes<HTMLElement>nav>
      <JSX.IntrinsicElements.main: HTMLAttributes<HTMLElement>main>{children: Viewchildren}</JSX.IntrinsicElements.main: HTMLAttributes<HTMLElement>main>
    </JSX.IntrinsicElements.div: HTMLAttributes<HTMLDivElement>div>
  );
}

Client entry

import { pageRouter } from "ilha:pages/client";

pageRouter.mount("#app");

Hydrate when the host already has SSR markup:

pageRouter.mount("#app", { hydrate: true });