Files are your routes

How files in pages/ become the URLs of a Markless app.

Last page, a saved value survived a reload. But a real app has more than one page, and each page needs a URL.

This section is for multi-page apps. A single-page app can call render() alone. See Use Markless without a server.

@markless/router gives a multi-page app four things: file routes, links between pages, page data, and API routes. Every npm create markless starter already includes it. It builds on Nitro, which deploys one app to many hosts.

Think of pages/ as a street map. Each file path is an address. On each request, the router picks the first file that matches the URL.

Type an address in the bar, or pick one.

Which file answers this address?

Type an address in the bar and press Go, or pick one. Watch which file answers.

The pageTry it

Pick one:

Home

Made by index.tsrx.

Your files in pages/, checked top to bottom

index.tsrx/ onlyanswers
about.tsrx/aboutnot checked
blog/new.tsrx/blog/newnot checked
blog/[slug].tsrx/blog/ and one more partnot checked
docs/[...slug].mdx/docs/ and one or more partsnot checked
404.tsrxwhen no file above matchesnot used

What the router did

File that made the page: index.tsrx
What the page gets as params: { }

ran/: index.tsrx made the page.

Simplified. The list shows the files in the order the router checks them: exact names first, then [slug], then [...slug]. The order and the matching follow packages/router/src/route-manifest.ts. An ending slash finds the same file, so /about/ works like /about.

Notice /docs. The catch-all file needs at least one more segment, so 404.tsrx answers.

The rules

File in `pages/`	Route
`index.tsrx`	`/`
`about.tsrx`	`/about` (and `/about/`)
`docs/index.mdx`	`/docs`
`blog/[slug].tsrx`	`/blog/:slug`
`docs/[...slug].mdx`	`/docs/` plus one segment or more
`404.tsrx`	any URL with no match, status 404
`500.tsrx`	a page that throws in a production build, status 500

Page files end in .tsrx or .mdx. The router skips every other file in pages/.

If two routes match one URL, a fixed segment wins over [param]. A [param] wins over [...rest].

Read the params

A page gets params, url, and status as props:

import type { PageProps } from '@markless/router';

export default function Post({ params }: PageProps<{ slug: string }>) @{
	<h1>Post {params.slug}</h1>
}

/blog/hello shows Post hello. A catch-all param is one string. For /docs/guide/intro, slug is guide/intro.

Next: How do you link to /blog/hello without a typo? Pages and links →