Solid Impl Routing

solid-impl-routing

Quick Reference

Installation

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

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

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

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

import { A } from "@solidjs/router";

Dashboard
Users
Settings

ALWAYS use end on root paths (/) to prevent matching every route.

Programmatic Navigation

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)

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

import { useParams } from "@solidjs/router";

function UserProfile() {
  const params = useParams();
  // ALWAYS access params.id directly — NEVER destructure
  return User: {params.id};
}

// Route: 

Search Parameters

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

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

import { lazy } from "solid-js";

const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));

Route Preloading

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

import { usePreloadRoute } from "@solidjs/router";

function NavBar() {
  const preload = usePreloadRoute();

  return (
    
       preload("/dashboard")}>
        Dashboard
      
    
  );
}

---

Nested Routes

The parent UsersLayout receives props.children which renders the matched child route.

---

Route Match Filters

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
• Source: Impertio-Studio/SolidJS-Claude-Skill-Package
• License: MIT

Install and usage instructions live in the source repository linked above.