Client-side routing.

Maps the browser location to the view a page renders, keeping the two in step: Router tracks the current route as it changes, whether a component navigates, a local link is followed or the browser moves through its history, and Routes renders the view for it wherever the page layout places it. Components below the router read the current route and navigate without being handed either.

Routes are root-relative location paths such as /users/123, so the site has to serve the app page for every one.

Route Tables

Routes selects the view through a table mapping route patterns to views or redirections:

<Routes>{{
    "/": <Home/>,
    "/users/": <Users/>,
    "/people/:id": "/users/:id",
    "*": <NotFound/>
}}</Routes>
Copy

A route is handled by the first pattern it matches, in table order, so specific patterns go before the general ones they overlap. The query and the hash of a route never take part in matching, and a route matching no pattern is rejected, unless an enclosing table declares a catch-all the table inherits, as described under Sections.

Route Patterns

A pattern other than the catch-all starts with /, and every pattern is matched against the whole route:

• Named steps: :slug standing for a whole path step matches any non-empty step, where slug is a sequence of word characters: /users/:id matches /users/123, but neither /users/ nor /users/123/posts
• Subtrees: a pattern ending with /, except the root /, matches the route up to it and every route below it
• Catch-all: * matches any route; placed last, it handles the routes the patterns before it leave unhandled, as a not-found view shown within the layout of the section or as a redirection; * is rejected within any other pattern, so /users/* and /* are not glob patterns but invalid ones

A view needing the matched steps reads the route with useRoute.

Redirections

A pattern mapped to a route rather than a view moves the location to that route, replacing the current history entry, so going back never lands on the route redirected from. In the target, :slug is replaced with the matched step, and a trailing / from a subtree pattern carries the route below the subtree along:

Redirections are followed until a view is reached, and rejected if they lead back to a route already visited.

Sections

A view may render a nested Routes, routing what its pattern leaves over as a section of its own, as listed under Section sees above: a section declares its sub-routes where it is implemented rather than in the table at the top of the app, and keeps working wherever that table mounts it. Sections nest to any depth, and a view mapped to a subtree handles every route below it, whether or not it renders a nested Routes.

Patterns and redirections within a section are relative to it, starting at its root /: under /users/, the pattern /:id matches /users/123, the redirection /all moves the location to /users/all, and a catch-all redirection to / moves it to /users/. Components below still read the full route with useRoute and navigate with useRouter, so links and navigators keep working unchanged wherever a section is mounted.

A section declaring no catch-all inherits the one of the nearest enclosing table declaring one, as if declared there, so a single * in the table at the top of the app handles the unknown routes of every section, a view being shown in place of the section, within the layout of the views enclosing it.