Routing

reatomRoute

Creates a new route atom with the given path pattern or configuration.

Routes automatically sync with the browser URL and provide type-safe navigation, parameter validation, data loading, and component rendering.

Example 1

// Simple path route
const homeRoute = reatomRoute('')
const aboutRoute = reatomRoute('about')
const userRoute = reatomRoute('users/:userId')

Example 2

// Route with validation schemas
import { z } from 'zod'

const userRoute = reatomRoute({
  path: 'users/:userId',
  params: z.object({
    userId: z.string().regex(/^\d+$/).transform(Number),
  }),
  search: z.object({
    tab: z.enum(['posts', 'comments']).optional(),
  }),
})

userRoute() // null
userRoute.go({ userId: '123', tab: 'posts' })
// URL: /users/123?tab=posts
userRoute() // { userId: 123, tab: 'posts' }

Example 3

// Route with loader
const userRoute = reatomRoute({
  path: 'users/:userId',
  async loader({ userId }) {
    const user = await fetch(`/api/users/${userId}`).then((r) =>
      r.json(),
    )
    return user
  },
})

Example 4

// Search-only route (preserves pathname)
const dialogRoute = reatomRoute({
  search: z.object({
    dialog: z.enum(['login', 'signup']).optional(),
  }),
})

Example 5

// Route with component rendering
const layoutRoute = reatomRoute({
  render(self) {
    return html `<div>
      <header>My App</header>
      <main>${self.outlet().map((child) => child)}</main>
    </div>`
  },
})

withSearchParams

Create an atom that synchronizes with a URL search parameter.