Routing

Misc

A few smaller tools round out routing: catching unmatched requests, knowing which route is active, reaching the router directly, and understanding how the same routes drive the browser.

#A fallback route

Give unmatched requests a home instead of a bare 404: a fallback route runs when nothing else matches. On the frontend it renders your not-found page; on an API it can return a shaped error payload.

app/routes.tsts

@Any('*', { fallback: true })
notFound (event: IncomingHttpEvent) {
  return { error: 'not_found', path: event.get('path') }
}

#The current route

In a component, useRoute() returns the active route (its name, params and path), which is how you highlight the current nav item or read a param without prop drilling.

app/pages/Nav.tsxtsx

import { useRoute } from '@stone-js/use-react'

const route = useRoute()
const isActive = route?.name === 'tasks.list'

#Reaching the router

useRouter() (in components) or the injected router (in handlers and services) gives you the router itself, for URL generation and programmatic navigation.

Member	Type	Description
router.generate(opts)	`(GenerateOptions) => string`	Build a URL from a route name, params and query.
router.match(event)	`(event) => Route`	Resolve the route for an event (advanced).
useRoute()	`() => Route \| undefined`	The active route in a component.
useRouter()	`() => Router`	The router instance in a component.

#Routing in the browser

The same route table drives client-side navigation. StoneLink uses it to navigate without a full reload in SPA and SSR, and falls back to a normal link where that is right. You write routes once; they serve the server render and the in-browser transitions alike.