Navigation

Plain <a href> links just work: the framework intercepts clicks, fetches the page, and re-renders in the browser. Pages are prefetched on hover and touch, and back/forward buttons are handled. Everything still works without JavaScript.

Programmatic navigation

Use load to render a page from code, and reload to re-run the loads for the current page:

import { load, reload } from "@torpor/build/nav";

await load("/posts");
await reload();

Building URLs

Use route to build URLs from route paths. Params are checked at compile time and URI-encoded:


import { route } from "@torpor/build/nav";

route("/posts/[id]", { id: 5 }); // "/posts/5"

The $page state object

$page is a global reactive object describing the current page. Import it from @torpor/build/state:


import { $page } from "@torpor/build/state";
  • $page.url — the current URL
  • $page.status — the response status code
  • $page.form — the result of the last form action
  • $page.error?.message — the current error, if any

It is used by the sidebar of this very site to highlight the active link, and by error pages to show the status.