Agent skill

solid-router-components

Solid Router components: A for links, Route for route config, Router for setup, Navigate for redirects, active states, soft navigation.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/solid-router-components

Metadata

Additional technical details for this skill

globs 
[
    "**/routes/**/*",
    "**/*router*"
]

SKILL.md

Solid Router Components

Complete guide to Solid Router components. Use these components for navigation, routing setup, and redirects.

A - Navigation Links

The <A> component provides enhanced anchor tags with automatic base path support, active states, and soft navigation.

Basic Usage

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

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
      <A href="/contact">Contact</A>
    </nav>
  );
}

Active States

tsx
<A href="/users" activeClass="active" inactiveClass="inactive">
  Users
</A>

Default behavior:

  • active class when href matches current location
  • inactive class otherwise
  • Matches descendants by default (e.g., /users matches /users/123)

Exact Matching

tsx
<A href="/" end>
  Home
</A>

end prop:

  • true: Only active when exact match
  • false: Active for descendants (default)
  • Useful for root route /

Props

Prop Type Description
href string Route path (relative or absolute)
noScroll boolean Disable scroll to top on navigation
replace boolean Replace history entry (no back button)
state unknown Push state to history stack
activeClass string Class when link is active
inactiveClass string Class when link is inactive
end boolean Exact match only (no descendants)

Soft Navigation

Both <A> and <a> support soft navigation when JavaScript is present. To disable:

tsx
<A href="/page" target="_self">Link</A>

Route - Route Configuration

Configure routes with preloading and other options.

Basic Route

tsx
import { Route } from "@solidjs/router";

<Route path="/users/:id" component={UserProfile} />

Route with Preload

tsx
<Route
  path="/users/:id"
  component={UserProfile}
  preload={({ params }) => {
    void getUserQuery(params.id);
  }}
/>

Route Props

Prop Type Description
path string Route path pattern
component Component Component to render
preload function Preload function

Router - Router Setup

Set up the router with base path and root component.

Basic Setup

tsx
import { Router, A } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";

function App() {
  return (
    <Router
      root={(props) => (
        <>
          <nav>
            <A href="/">Home</A>
            <A href="/about">About</A>
          </nav>
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

With Base Path

tsx
<Router base="/app">
  <FileRoutes />
</Router>

Base path:

  • Prepended to all routes
  • <A> components respect base
  • Native <a> tags don't

Router Props

Prop Type Description
base string Base path for all routes
root Component Root component wrapper
data object Router data

Navigate - Programmatic Redirects

Redirect to a route programmatically.

Basic Redirect

tsx
import { Navigate } from "@solidjs/router";

function Redirect() {
  return <Navigate href="/home" />;
}

Replace History

tsx
<Navigate href="/home" replace />

With State

tsx
<Navigate href="/home" state={{ from: "/login" }} />

Conditional Redirect

tsx
function ProtectedRoute() {
  const isAuthenticated = useAuth();
  
  return (
    <Show when={isAuthenticated()} fallback={<Navigate href="/login" />}>
      <ProtectedContent />
    </Show>
  );
}

Common Patterns

Navigation Menu

tsx
function Navigation() {
  return (
    <nav>
      <A href="/" end activeClass="active">
        Home
      </A>
      <A href="/about" activeClass="active">
        About
      </A>
      <A href="/contact" activeClass="active">
        Contact
      </A>
    </nav>
  );
}

Breadcrumbs

tsx
function Breadcrumbs() {
  const location = useLocation();
  const path = location.pathname.split("/").filter(Boolean);
  
  return (
    <nav>
      <A href="/">Home</A>
      <For each={path}>
        {(segment, index) => (
          <>
            <span> / </span>
            <A href={`/${path.slice(0, index() + 1).join("/")}`}>
              {segment}
            </A>
          </>
        )}
      </For>
    </nav>
  );
}

Protected Routes

tsx
function ProtectedRoute({ children }) {
  const isAuthenticated = useAuth();
  
  return (
    <Show when={isAuthenticated()} fallback={<Navigate href="/login" />}>
      {children}
    </Show>
  );
}

Route with Data

tsx
<Route
  path="/users/:id"
  component={UserProfile}
  preload={({ params }) => {
    void getUserQuery(params.id);
  }}
/>

Best Practices

  1. Use <A> for navigation:

    • Automatic active states
    • Base path support
    • Soft navigation

  2. Wrap router with Suspense:

    • Routes are lazy-loaded
    • Suspense handles loading

  3. Use end prop for root:

    • Prevents / matching everything
    • Exact match only

  4. Preload route data:

    • Use preload function
    • Seed caches early

  5. Use Navigate for redirects:

    • Programmatic navigation
    • Conditional redirects

Summary

  • A: Enhanced anchor with active states
  • Route: Route configuration
  • Router: Router setup with base path
  • Navigate: Programmatic redirects
  • Active states: Automatic class management
  • Soft navigation: Enhanced performance

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results