Solid Router Components

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

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

<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

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

end prop:

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

Props

Soft Navigation

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

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

Route - Route Configuration

Configure routes with preloading and other options.

Basic Route

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

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

Route with Preload

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

Route Props

Router - Router Setup

Set up the router with base path and root component.

Basic Setup

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

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

Base path:

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

Router Props

Navigate - Programmatic Redirects

Redirect to a route programmatically.

Basic Redirect

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

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

Replace History

<Navigate href="/home" replace />

With State

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

Conditional Redirect

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

Common Patterns

Navigation Menu

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

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

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

Route with Data

<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