function Navigation() { return ( Home About Contact ); }


### 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

<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:

<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

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

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

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

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

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

Use <A> for navigation:
- Automatic active states
- Base path support
- Soft navigation
Wrap router with Suspense:
- Routes are lazy-loaded
- Suspense handles loading
Use end prop for root:
- Prevents / matching everything
- Exact match only
Preload route data:
- Use preload function
- Seed caches early
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

solid-router-components

Solid Router Components

A - Navigation Links

Basic Usage