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>`
  },
})

is404

A computed atom that indicates whether the current URL matches any defined routes.

Returns true when no routes match the current URL (404 scenario), and false when at least one route matches.

This is useful for implementing fallback UI, displaying “page not found” messages, or redirecting users when they navigate to non-existent pages.

searchParamsAtom

Create an atom that represents search parameters from the URL.

withSearchParams

Create an atom that synchronizes with a URL search parameter.