SolidStart File-Based Routing

Project Structure

public/              # Static assets
src/
├── routes/          # File-based routing
├── entry-client.tsx # Client entry
├── entry-server.tsx # Server entry
├── app.tsx          # Root component

Basic Routes

Routes created by files in src/routes/. Each file must default export a component.

• routes/index.tsx → /
• routes/about.tsx → /about
• routes/blog.tsx → /blog

// routes/index.tsx
export default function Index() {
  return <div>Home</div>;
}

Dynamic Routes

• routes/users/[id].tsx → /users/:id
• routes/posts/[[slug]].tsx → /posts/:slug? (optional)
• routes/docs/[...path].tsx → /docs/* (catch-all)

// routes/users/[id].tsx
import { useParams } from "@solidjs/router";

export default function UserProfile() {
  const params = useParams();
  return <div>User {params.id}</div>;
}

Nested Routes

Create directories for nested routes:

• routes/blog/article-1.tsx → /blog/article-1

// routes/blog/article-1.tsx
export default function Article() {
  return <article>Content</article>;
}

Nested Layouts

Create layout file with same name as directory:

// routes/blog.tsx - layout
import { RouteSectionProps } from "@solidjs/router";

export default function BlogLayout(props: RouteSectionProps) {
  return (
    <div>
      <nav><h1>Blog</h1></nav>
      <main>{props.children}</main>
    </div>
  );
}

// routes/blog/article-1.tsx - nested route
export default function Article() {
  return <article>Content</article>;
}

Route Groups

Use parentheses for organization (don't affect URL):

routes/
├── (auth)/
│   ├── login.tsx     → /login
│   └── signup.tsx    → /signup
└── (marketing)/
    ├── about.tsx     → /about
    └── contact.tsx   → /contact

Index File Naming

Rename index files with parentheses for clarity:

• routes/blog/(blog).tsx → /blog (instead of routes/blog/index.tsx)

Escaping Nested Routes

Use parentheses to escape nested structure:

routes/
├── users.tsx              # Layout
├── users/
│   ├── index.tsx          # /users
│   └── projects.tsx       # /users/projects
└── users(details)/
    └── [id].tsx           # /users/:id (separate layout)

Route Configuration

Export route object for preloading:

import type { RouteDefinition } from "@solidjs/router";

export const route = {
  preload({ params }) {
    return getData(params.id);
  }
} satisfies RouteDefinition;

export default function Page() {
  return <div>Content</div>;
}

App Setup

app.tsx

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

export default function App() {
  return (
    <Router root={(props) => <Suspense>{props.children}</Suspense>}>
      <FileRoutes />
    </Router>
  );
}

Critical: Always wrap router root with <Suspense> - routes are lazy-loaded.

Entry Points

entry-client.tsx:

import { mount, StartClient } from "@solidjs/start/client";
mount(() => <StartClient />, document.getElementById("app")!);

entry-server.tsx:

import { StartServer, createHandler } from "@solidjs/start/server";
export default createHandler(StartServer);