Browse recipes

Mount a routed application

Render one root from matching, parameterized and fallback routes.

Table of contents

APIs used

Router
Coordinates route definitions and resolves navigation through the public router flow.
mountRouter
Uses a Router as the mounted navigation root.

Run this recipe

Starting project
Use the local TSX and ESM project from Stage 1 with Valyrian.js installed and its ESM browser build configured.
File
Replace src/client-entry.tsx with this recipe snippet.
Run
Run npm run build, serve public with npx --yes serve@14.2.5 public --listen 8000, open http://localhost:8000 and use the example's visible controls.
Observable result
The router renders the matching heading or the not-found response for an unmatched location.

Starting point

Create a router with a home route, one parameterized route and a 404 handler.

Steps

Register each route, read the user identifier from route parameters and mount the router in body.

tsx
import { Router, mountRouter } from "valyrian.js/router";

const router = new Router();
router.add("/", () => <h1>Home</h1>);
router.add("/users/:id", (request) => <h1>User {request.params.id}</h1>);
router.catch(404, () => <h1>Not found</h1>);

mountRouter("body", router);

Result

The router renders the matching heading or the not-found response for an unmatched location.

Limits

Keep route paths and fallback behavior explicit in the router definition.

Continue