Source: https://www.hype-stack.dev/docs/frontend/routing

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

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

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

```tsx
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`