solid-router

Bind TanStack Router to Solid apps for type-safe routing.

Updated Apr 2, 2026

Search Tags:#frontend #routing #hooks #solid #tanstack-router #solid-js

Ready to run

npx skills add https://github.com/abereghici/skills --skill solid-router-abereghici

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: solid-router
Source: https://github.com/abereghici/skills/tree/main/vendor/tanstack-router/packages/solid-router/skills/solid-router
Command: npx skills add https://github.com/abereghici/skills --skill solid-router-abereghici

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solid bindings for TanStack Router provide a cohesive integration layer enabling Solid apps to use RouterProvider, navigation links, and route data with type-safe patterns.

Core Features & Use Cases

Type-safe bindings for TanStack Router in Solid: RouterProvider, Link, Navigate, Outlet, and hooks such as useRouter, useLocation, useParams, useLoaderData, useMatch, and more.
Clear guidance on client-first routing, data loading semantics, and Solid-optimized patterns to avoid common React-oriented pitfalls.
Real-world scenarios include building a multi-route SPA with nested routes, navigation guards, and deferred data handling.

Quick Start

Create a Solid app and wire up TanStack Router bindings to enable type-safe routing, hooks, and declarative components.

Frequently Asked Questions about solid-router

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

FAQPage Schema

How do I set up type-safe routing in a Solid SPA using TanStack Router?▼

To set up type-safe routing in a Solid SPA, wire up the RouterProvider and route configuration to bind TanStack Router, enabling declarative navigation and type-safe hooks within your Solid components.

What hooks are available for TanStack Router bindings in Solid apps?▼

TanStack Router bindings in Solid apps provide hooks such as useRouter, useLocation, useParams, useLoaderData, and useMatch to access router state, parameters, and loaded data within Solid components.

Does TanStack Router work with Solid for nested routes and data loading?▼

Yes, TanStack Router works with Solid to support nested routes, navigation guards, and deferred data handling, providing a cohesive integration layer for client-side routing and data loading semantics.

Can I use React-oriented routing patterns and components directly in Solid apps?▼

No, you should avoid common React-oriented routing pitfalls by using Solid-optimized patterns, utilizing the provided Link, Navigate, and Outlet components instead of directly porting React-specific routing logic.

What do I need to configure TanStack Router navigation and data loading in Solid?▼

Configuring TanStack Router navigation and data loading in Solid requires installing the necessary integration packages and wiring up the RouterProvider to specify route configuration and enable type-safe data hooks.