skills.rest
abereghici
abereghiciCOMMUNITY
Explore all skills by this author →
Website𝕏@alexandrubrgGitHub

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
One-click install
npx skills add https://github.com/abereghici/skills --skill solid-router-abereghici
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
lespacemanlespaceman
4

router-core/data-loading

Coordinate TanStack Router route data loading with parameter-aware caching and preloading.

Community
Intermediate
zinohomezinohome
1

page-layout-builder

Generate page layouts and shells for common web application patterns.

Community
Intermediate
TanStackTanStack
14.9k

solid-router

Integrate Solid with TanStack Router for type-safe routing.

Official
Advanced