Any .js file inside the routes directory that exports a default component is treated as a page.

export default function Settings() { return ( <div> <h1>Settings</h1> {/* content */} </div> ) }

The file above maps to the /dashboard/settings URL and renders a settings page.

Dynamic Segments

Pages can include dynamic segments by using the $ symbol in their filename

import { useRoute } from 'firebolt' export default function Post() { const { slug } = useRoute().params return ( <div> <h1>Post</h1> <p>Slug: {slug}</p> </div> ) }

The useRoute hook provides information about the current page, including dynamic segment variables that you can then use to load data or drive the UI with.


Firebolt also supports catch-all dynamic segments with the + and - suffix

PageExample URLParams
routes/cities/$tags+.js/cities/coastal/tech-hub{ tags: ["coastal", "tech-hub"] }
routes/cities/$tags-.js/cities/coastal/tech-hub{ tags: ["coastal", "tech-hub"] }
routes/cities/$tags-.js/cities{ tags: [] }