skills.rest
guillempuche
guillempucheCOMMUNITY
Explore all skills by this author →
GitHub

solid-router

Provide Solid bindings for TanStack Router with type-safe APIs and reactive hooks.

Updated Aug 27, 2026
Search Tags:#routing#vite#type-safety#loaders#tanstack-router#solidjs#accessor
One-click install
npx skills add https://github.com/guillempuche/engranatge --skill solid-router-guillempuche
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: solid-router
Source: https://github.com/guillempuche/engranatge/tree/main/docs/repos/tanstack-router/packages/solid-router/skills/solid-router
Command: npx skills add https://github.com/guillempuche/engranatge --skill solid-router-guillempuche

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides Solid-specific bindings for TanStack Router so SolidJS apps can use type-safe routing APIs, reactive Accessor-returning hooks, and integrated head management without fighting React-centric patterns or losing type inference.

Core Features & Use Cases

  • RouterProvider and router instance registration for full type safety across links, navigation, and loaders.
  • Accessor-returning hooks (useRouterState, useParams, useSearch, useLoaderData, useMatches) and components (Link, Navigate, Outlet, CatchBoundary, Await) adapted to Solid reactivity.
  • Vite plugin support for file-based routing, client-first loaders, Suspense/Await patterns, and @solidjs/meta head integration; ideal for migrating from React or building new Solid SPAs that require strong type inference and predictable loader semantics.

Quick Start

Install @tanstack/solid-router and the router Vite plugin, set the plugin target to solid, generate a routeTree, create a router, register its type module, and wrap your app in RouterProvider while remembering to call Accessor functions to read reactive values.

Frequently Asked Questions about solid-router

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get type-safe routing in a SolidJS application?▼

Type-safe routing in SolidJS is achieved by using Solid bindings for TanStack Router, which provide Accessor-returning hooks and full type inference across links, navigation, and loaders.

Can I use TanStack Router with SolidJS reactivity and Suspense?▼

Yes, TanStack Router works with SolidJS by adapting router hooks to return Solid Accessors and integrating with Suspense and Await patterns for client-first loaders and predictable data fetching.

How do I configure Vite for file-based routing in SolidJS?▼

Configure the Vite router plugin by setting the target to solid, then generate a routeTree, create a router instance, register its type module, and wrap your application in RouterProvider.

Does TanStack Router support Solid-compatible reactive hooks for params and search queries?▼

TanStack Router supports Solid-compatible reactive hooks like useParams, useSearch, useRouterState, and useLoaderData, which return Accessor functions that must be called to read reactive values.

Why do my Solid router hooks return a function instead of the route value?▼

Solid router hooks return Accessor functions to maintain reactivity; you must call the returned Accessor function to read the reactive value, matching SolidJS primitive patterns like createMemo.

Is there a way to manage head metadata in a SolidJS SPA using TanStack Router?▼

Head metadata management in a SolidJS SPA is handled through @solidjs/meta integration, allowing you to manage document head tags while using type-safe router APIs and file-based routing.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
rohitg00rohitg00
2.5k

react-patterns

Apply React 19 Server Components, Actions, Suspense, and hooks to build scalable UI architectures.

Community
Advanced
adamhjkadamhjk
2

solid-meta

Manage SolidJS head tags reactively with declarative components and useHead.

Community
Basic
pelithpelith

tanstack-router

Create type-safe file-based routes with loaders for React applications.

Official
Intermediate