# `@ilha/router`
A tiny, isomorphic SPA router for [Ilha](https://github.com/ilhajs/ilha) islands. You register routes (or scan a `src/pages/` directory), mount the router in the browser, and render the same routes to HTML on the server. Server islands re-render through a guarded frame endpoint.
---
## Installation
```bash
bun add @ilha/router
```
`ilha` is a peer dependency. For server islands you also need [`oxidejs`](https://npmjs.com/package/oxidejs).
---
## Import paths
| Import path | Use it for |
| --- | --- |
| `@ilha/router` | Runtime router, navigation, `head`, route hooks |
| `@ilha/router/vite` | Vite file-system routing plugin (`pages()`) |
| `@ilha/router/rsbuild` | Rsbuild file-system routing plugin (`pages()`) |
| `@ilha/router/server-island` | Client proxies for `*.server` modules (generated) |
| `@ilha/router/ssr` | `POST /__ilha/frame` middleware and frame guards |
There is no loader API. Fetch data inside an async component, or stream from a server module.
---
## Quick start
### Client SPA
```tsx
import { router } from "@ilha/router";
const HomePage = () => home
;
const AboutPage = () => about
;
const NotFound = () => not found
;
router()
.route("/", HomePage)
.route("/about", AboutPage)
.route("/**", NotFound)
.mount("#app");
```
A mounted SPA router intercepts same-origin `` clicks. Use ordinary links for navigation; call `navigate()` after application logic.
### Server HTML
```ts
import { router } from "@ilha/router";
import { httpResponse } from "@ilha/router";
const app = router().route("/", HomePage).route("/**", NotFound);
const html = await app.render(new Request("https://app.test/"));
return httpResponse(html);
```
### SSR + hydration (recommended)
```ts
// server
const app = router().route("/", HomePage).route("/**", NotFound);
const res = await app.respond(new Request(request.url), {
shell: (head, html) =>
`${head.headTags}${html}