# Solid Impl Routing > > - **Type:** Skill - **Install:** `agentstack add skill-impertio-studio-solidjs-claude-skill-package-solid-impl-routing` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [Impertio-Studio](https://agentstack.voostack.com/s/impertio-studio) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [Impertio-Studio](https://github.com/Impertio-Studio) - **Source:** https://github.com/Impertio-Studio/SolidJS-Claude-Skill-Package/tree/main/skills/source/solid-impl/solid-impl-routing ## Install ```sh agentstack add skill-impertio-studio-solidjs-claude-skill-package-solid-impl-routing ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # solid-impl-routing ## Quick Reference ### Installation ```bash npm install @solidjs/router ``` Requires SolidJS v1.8.4 or later. ### Router Types | Router | URL Style | Use Case | |--------|-----------|----------| | `Router` | `/path` | Production apps with server support | | `HashRouter` | `/#/path` | Static hosting without server rewrites | | `MemoryRouter` | In-memory | Testing, no browser history | ### Hook Quick Reference | Hook | Returns | Purpose | |------|---------|---------| | `useNavigate()` | `(to, options?) => void` | Programmatic navigation | | `useParams()` | `Params` | Dynamic route parameter values | | `useSearchParams()` | `[params, setParams]` | Query string read/write | | `useLocation()` | `Location` | Current pathname, search, hash, state | | `useMatch(() => path)` | `Accessor` | Check if path matches current route | | `useIsRouting()` | `Accessor` | True during navigation transitions | | `useBeforeLeave(callback)` | `void` | Route guard (unsaved changes warning) | | `usePreloadRoute()` | `(href) => void` | Trigger preloading on hover | | `useCurrentMatches()` | `Accessor` | All matched route segments | ### React Router vs Solid Router | Concept | React Router (WRONG) | Solid Router (CORRECT) | |---------|---------------------|------------------------| | Link component | `` | `` | | Route element | `element={}` | `component={Home}` | | Router hook | `useRouter()` | `useNavigate()` | | Lazy import | `React.lazy(...)` | `lazy(...)` from `solid-js` | | Loader data | `useLoaderData()` | `createAsync(() => query(...))` | | Route loader | `loader` prop | `preload` prop | ### Critical Warnings **NEVER** use `element={}` on a Route. This React pattern creates the component immediately, bypassing Solid Router's deferred rendering. ALWAYS use `component={Component}` (passing the reference, not a JSX call). **NEVER** import `Link` from `@solidjs/router` — the component is called `A`, not `Link`. Using `Link` causes an import error. **NEVER** import `useRouter` — this does not exist in Solid Router. ALWAYS use `useNavigate()` for programmatic navigation. **NEVER** destructure `useParams()` at the top level — the returned object is a reactive proxy. Destructuring breaks reactivity. ALWAYS access `params.id` directly in JSX or inside tracked scopes. **NEVER** call `useSearchParams()[1]` with a full replacement object expecting it to clear other params — it merges by default. To remove a param, set it to `undefined`. --- ## Router Setup ### Basic Router with JSX Routes ```tsx import { Router, Route } from "@solidjs/router"; import { lazy } from "solid-js"; import { render } from "solid-js/web"; const Home = lazy(() => import("./pages/Home")); const About = lazy(() => import("./pages/About")); const User = lazy(() => import("./pages/User")); function App() { return ( ); } render(() => , document.getElementById("root")!); ``` ### Router with Root Layout ```tsx import { Router, Route } from "@solidjs/router"; import type { RouteSectionProps } from "@solidjs/router"; function Layout(props: RouteSectionProps) { return ( Home About {props.children} ); } function App() { return ( ); } ``` ### Config-Based Routing ```tsx import { Router } from "@solidjs/router"; import type { RouteDefinition } from "@solidjs/router"; import { lazy } from "solid-js"; const routes: RouteDefinition[] = [ { path: "/", component: lazy(() => import("./pages/Home")) }, { path: "/about", component: lazy(() => import("./pages/About")) }, { path: "/users", component: lazy(() => import("./pages/Users")), children: [ { path: "/:id", component: lazy(() => import("./pages/UserDetail")) }, ], }, ]; function App() { return {routes}; } ``` --- ## Navigation ### The `` Component ```tsx import { A } from "@solidjs/router"; Dashboard Users Settings ``` ALWAYS use `end` on root paths (`/`) to prevent matching every route. ### Programmatic Navigation ```tsx import { useNavigate } from "@solidjs/router"; function LoginButton() { const navigate = useNavigate(); const handleLogin = async () => { await performLogin(); navigate("/dashboard", { replace: true }); }; return Log In; } ``` ### Navigate Component (Redirect) ```tsx import { Navigate } from "@solidjs/router"; import { Show } from "solid-js"; function ProtectedRoute(props: RouteSectionProps) { const user = useUser(); return ( }> {props.children} ); } ``` --- ## Route Parameters and Search Params ### Dynamic Parameters ```tsx import { useParams } from "@solidjs/router"; function UserProfile() { const params = useParams(); // ALWAYS access params.id directly — NEVER destructure return User: {params.id}; } // Route: ``` ### Search Parameters ```tsx import { useSearchParams } from "@solidjs/router"; function ProductList() { const [search, setSearch] = useSearchParams(); return ( Page: {search.page ?? "1"} setSearch({ page: String(Number(search.page ?? 1) + 1) })}> Next Page ); } ``` --- ## Route Guards ```tsx import { useBeforeLeave } from "@solidjs/router"; import { createSignal } from "solid-js"; function EditForm() { const [dirty, setDirty] = createSignal(false); useBeforeLeave((e) => { if (dirty() && !e.defaultPrevented) { e.preventDefault(); if (window.confirm("Discard unsaved changes?")) { e.retry(true); // Force navigation } } }); return setDirty(true)} />; } ``` --- ## Lazy Loading and Preloading ### Lazy Route Components ```tsx import { lazy } from "solid-js"; const Dashboard = lazy(() => import("./pages/Dashboard")); const Settings = lazy(() => import("./pages/Settings")); ``` ### Route Preloading ```tsx import { Route, query, createAsync } from "@solidjs/router"; import type { RoutePreloadFuncArgs } from "@solidjs/router"; const getProduct = query(async (id: string) => { const res = await fetch(`/api/products/${id}`); return res.json(); }, "product"); function preloadProduct({ params }: RoutePreloadFuncArgs) { getProduct(params.id); // Fire-and-forget, warms cache } // Route definition ``` ### Hover Preloading ```tsx import { usePreloadRoute } from "@solidjs/router"; function NavBar() { const preload = usePreloadRoute(); return ( preload("/dashboard")}> Dashboard ); } ``` --- ## Nested Routes ```tsx ``` The parent `UsersLayout` receives `props.children` which renders the matched child route. --- ## Route Match Filters ```tsx ``` The route only matches when `id` is numeric. Non-matching URLs fall through to other routes or 404. --- ## Reference Links - [references/methods.md](references/methods.md) -- API signatures for Router, Route, A, Navigate, and all hooks - [references/examples.md](references/examples.md) -- Working code examples for router setup, navigation, guards, lazy loading, preloading, nested routes - [references/anti-patterns.md](references/anti-patterns.md) -- React Router patterns that break Solid Router, with corrections ### Official Sources - https://docs.solidjs.com/solid-router - https://docs.solidjs.com/solid-router/reference/components/a - https://docs.solidjs.com/solid-router/reference/components/route - https://docs.solidjs.com/solid-router/reference/primitives/use-navigate - https://docs.solidjs.com/solid-router/reference/preload-functions/preload ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [Impertio-Studio](https://github.com/Impertio-Studio) - **Source:** [Impertio-Studio/SolidJS-Claude-Skill-Package](https://github.com/Impertio-Studio/SolidJS-Claude-Skill-Package) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-impertio-studio-solidjs-claude-skill-package-solid-impl-routing - Seller: https://agentstack.voostack.com/s/impertio-studio - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.