routing

Reactra routing is file-based. Files under src/pages become routes; the path maps to the URL. @reactra/vite-plugin generates the route manifest.

File	Route
pages/index.tsx	/
pages/about.tsx	/about
pages/users/[id].tsx	/users/:id

param and query

export component UserPage {
  param id: string          // from the path segment [id]
  query tab?: string        // from the URL ?tab=…
  view {
    <h1>User {id} — {tab ?? "overview"}</h1>
  }
}

Compiled React 19 — this is the file in your repo

import { useEffect } from "react"
import { useRoute } from "@reactra/router"

export const UserPage = () => {
  const __route = useRoute()
  const id = __route.params.id
  const tab = __route.query.tab
  useEffect(() => { const h = globalThis.__REACTRA_TEST__; if (h) h.update("UserPage", {}) })
  return (<>
    <h1>User {id} — {tab ?? "overview"}</h1>
  </>)
}
export default UserPage

• param X: T binds a dynamic path segment. It projects at its declared type.
• query X?: T binds a URL query parameter.

Both are reactive: navigating to a new id or changing ?tab= re-renders.

Navigation

Use RouteLink for declarative links, or the router’s navigate() for programmatic navigation:

view {
  <nav>
    <RouteLink to="/">Home</RouteLink>
    <RouteLink to="/users/ada">Ada</RouteLink>
  </nav>
}

Conventions

• _layout.tsx wraps every page in its directory.
• _loading.tsx shows while an async route resolves.
• _error.tsx is the route-level error boundary.

For per-route guards and cross-cutting logic, see the middleware pipeline (covered in How-to).