Solid.js Routing — Client-Side Navigation

In this tutorial, you will learn about Solid.js Routing. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Solid.js routing: set up client-side routing with @SolidJS/router, create routes, handle navigation, and use route params.

In this lesson, you'll install and configure Solid.js router, create routes with parameters, navigate between pages, and handle 404s.

What You'll Learn

How to install the router, define routes, navigate programmatically, use dynamic parameters, and create nested layouts.

Why It Matters

Routing enables multi-page experiences in single-page applications. Solid.js router is lightweight and deeply integrated with Solid.js reactivity.

Real-World Use

Doda Browser uses Solid.js router for its settings pages, extension management, and bookmark views.

flowchart TD
    A[Router] --> B["/ (Home)"]
    A --> C["/users (List)"]
    A --> D["/users/:id (Detail)"]
    A --> E["/settings (Settings)"]
    A --> F["* (404)"]
    style A fill:#2c4f7c,color:#fff

Installation

npm install @solidjs/router

Basic Routes

import { Router, Route, Routes } from "@solidjs/router";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users" component={Users} />
        <Route path="/users/:id" component={UserProfile} />
        <Route path="*404" component={NotFound} />
      </Routes>
    </Router>
  );
}

Navigation

import { Link, NavLink, useNavigate } from "@solidjs/router";

function Nav() {
  const navigate = useNavigate();

  return (
    <nav>
      <Link href="/">Home</Link>
      <NavLink href="/about" class="nav-link" activeClass="active">
        About
      </NavLink>
      <button onClick={() => navigate("/users")}>Go to Users</button>
    </nav>
  );
}

Route Parameters

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

function UserProfile() {
  const params = useParams();

  return <h1>User ID: {params.id}</h1>;
}

Common Mistakes

1. Not wrapping the app in <Router>: Route components outside <Router> don't match routes.
2. Missing *404 catch-all route: Without it, unmatched routes show nothing.
3. Using <a> instead of <Link>: Regular <a> tags cause full page reloads. Use <Link> for client-side navigation.
4. Forgetting the component prop: Routes need either component or children to render.
5. Nesting routes without layouts: Use layout components for shared UI across routes.

Practice Questions

1. What does <Routes> component do? Answer: Renders the first matching route from its children <Route> components.

2. How do you access dynamic route parameters? Answer: Call useParams() which returns an object with the matched params (e.g., { id: "42" }).

3. How do you create a catch-all 404 route? Answer: Add <Route path="*404" component={NotFound} /> at the end of the routes.

4. What is the difference between <Link> and <NavLink>? Answer: <NavLink> accepts activeClass prop that's applied when the link matches the current route.

Challenge

Build a multi-page app with routes for home, blog list, individual blog posts (/blog/:slug), about page, and a 404 page. Use <NavLink> for navigation highlighting.

Mini Project

Create a documentation site with routing: main pages (getting-started, guides, api), nested routes for guide sections, sidebar navigation with active link highlighting, and breadcrumb component.

FAQ

What's Next

Learn about Solid.js Testing for testing Solid.js components and applications.