File-Based Routing

Every .html file in pages/ is a route. Its path in the folder is its URL.

There is no route table to write.

pages
index.html/
about.html/about
index.html/blog
archive.html/blog/archive

Select a file to see what it is for

A folder becomes a path segment, and index.html is that folder's own page.

URLs are lowercase

The file's name is lowercased on the way to the URL, so pages/PricingPlans.html is /pricingplans.

Name page files in lowercase and the two always match.

pages/about.html and pages/about/index.html both mean /about.

Pick one - shipping both is a conflict, and the build says so.

What is not a route

Two things never appear in the route table:

  • layout.html - it wraps the pages around it instead. See Layouts.
  • Everything in pages/errors/ - those pages are rendered when a navigation fails. See Error Pages.

Everything else is a route, components included.

Give a component a folder the router skips and it stays out:

pages
index.html/
layout.htmlWraps every page
Header.htmlNot a route
PostCard.htmlNot a route
index.html/blog
[slug].html/blog/:slug
404.htmlShown for unknown routes

Select a file to see what it is for

The folder is what skips them, not the capital letter. pages/Header.html is still a component and a route at /header. The skipped folders are components/, partials/ and shared/; the list is routing.ignore in your config.

Linking between pages

A plain <a href="/about">. JAF intercepts links to your own pages and swaps the content without a reload. See Navigation.