How to Add Routes

Hype Stack uses TanStack Router with file-based routing. Add a file in src/routes/ and the route exists.

Route file convention

Each route is a file that exports a Route constant created with createFileRoute:

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/(default)/my-page/")({
  component: MyPage,
});

function MyPage() {
  return <h1>My Page</h1>;
}

Folder structure

src/routes/
  __root.tsx              # Root layout (wraps everything)
  (default)/              # Route group: main app layout (navbar, footer)
    (landing)/
      index.tsx           # Home page
    settings/
      index.tsx           # Settings page
    docs/
      route.tsx           # Docs layout (sidebar)
      index.tsx           # Docs index redirect
      $.tsx               # Splat route for all doc pages
  (public)/               # Route group: public pages (login, signup)
    login/
      index.tsx
    signup/
      index.tsx

Route groups

Parenthesized folders like (default) and (public) are route groups. They share a layout without adding a URL segment. (default)/settings/index.tsx maps to /settings, not /(default)/settings.

Each route group has a route.tsx that defines the shared layout:

export const Route = createFileRoute("/(default)")({
  component: DefaultLayout,
});

Dynamic routes

Use $ in the filename for dynamic segments:

routes/(default)/projects/$projectId/index.tsx

Access the param in the component:

const { projectId } = Route.useParams();

Route tree generation

TanStack Router auto-generates routeTree.gen.ts from the file structure. You don't edit this file. Run the dev server and it updates automatically.

Adding a new page

1. Create src/routes/(default)/my-page/index.tsx
2. Export a Route with createFileRoute and a component
3. The dev server regenerates the route tree
4. Navigate to /my-page