The universal router for SolidJS providing fine-grained reactivity for route navigation with support for history-based, hash-based, static (SSR), and memory-based routing modes. Use when building single-page applications in SolidJS that require client-side routing, nested routes, data loading APIs, form actions, or universal rendering across server and client environments.
The universal router for SolidJS providing fine-grained reactivity for route navigation with support for history-based, hash-based, static (SSR), and memory-based routing modes. Use when building single-page applications in SolidJS that require client-side routing, nested routes, data loading APIs, form actions, or universal rendering across server and client environments.
Solid Router (@solidjs/router) brings fine-grained reactivity to route navigation, enabling single-page applications to become multi-paged without full page reloads. It is fully integrated into the SolidJS ecosystem with declarative syntax, universal rendering, and parallel data fetching through preload functions and a query caching API.
Key features:
All routing modes — History-based (Router), hash-based (HashRouter), static for SSR (StaticRouter), and memory-based for testing (MemoryRouter)
TypeScript-first — Full type safety for route parameters, match filters, and data APIs
Universal rendering — Seamless server-side and client-side rendering with the same router
Declarative routes — Define routes as JSX components or plain objects
Preload functions — Parallel data fetching following render-as-you-fetch pattern
Dynamic route parameters — URL patterns with parameters, optional segments, and wildcards
Data APIs with caching — query, createAsync, action with deduplication and revalidation
Form actions — Server-like mutation actions with redirect, reload, and json response helpers
When to Use
Building a SolidJS single-page application that needs client-side routing
Setting up nested routes with shared layouts using props.children
Implementing data fetching alongside route transitions with preload functions
Building SSR applications that need the same router on server and client
Creating form-based mutations with automatic revalidation
Migrating from Solid Router 0.9.x (where <Outlet>, <Routes>, and useRouteData were removed)
Needing hash-based or memory-based routing for special deployment or testing scenarios
Installation / Setup
Install the package and wrap your application root with a Router component:
Routes are defined declaratively — Each <Route> specifies a path and a component. Only leaf routes (innermost <Route> components without children) become actual navigable routes. Parent routes act as layout wrappers via props.children.
The root prop — A top-level layout component passed to <Router root={App}> wraps every route. It is the ideal place for navigation bars, context providers, and shared UI that persists across page changes.
Props passed to route components — Every route component receives params (path parameters), location (current URL info), data (preload return value), and children (nested route output).
Preload functions — A preload function on a route receives { params, location, intent } and is called when the route loads or eagerly on link hover. Its return value is passed as props.data to the component (except when intent is "preload").
functionpreloadUser({ params, location, intent }) {
// Called on route load and on link hoverreturnfetch(`/api/users/${params.id}`).then(r => r.json());
}
<Route path="/users/:id" component={User} preload={preloadUser} />;
