page.js

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

routes/dashboard/settings.js
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

routes/blog/$slug.js
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.

Catch-all

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