A second page#

A page's file path is its URL: src/routes/about.route.ts is /about.

Add the page#

Create src/routes/about.route.ts:

import { Route, html } from "@palinx/core";

export default class About extends Route {
  render() {
    return html`
      <h1>About</h1>
      <a href="/">Home</a>
    `;
  }
}

And link to it from the home page:

 // There is no index.ts any more. `px dev` starts the server, and it finds
 // this page because the file lives in src/routes/.
 import { Route, html } from "@palinx/core";
 
 export default class Home extends Route {
   render() {
-    return html`<h1>hello</h1>`;
+    return html`
+      <h1>hello</h1>
+      <a href="/about">About</a>
+    `;
   }
 }

Run it#

With bun run dev running, save the files. The terminal now counts two pages:

  Routes: 2 pages, 0 API

On http://localhost:2500, the About link goes to /about, which shows About and a link back to Home.

How it works#

Palinx strips src/routes/ and the .route.ts suffix from the path, so there's no route table to maintain. index maps to its folder's own path, and folders become path segments: src/routes/blog/archive.route.ts would be /blog/archive.

Clicking a link to another page is handled in the browser: palinx renders the new page without reloading the document. Routing & layouts covers dynamic segments, catch-all routes and the rest.

Next: A shared layout.