Create TanStack Route

Create a new file-based route for TanStack Start with proper structure.

Goal

Generate a properly configured route with:

• •Correct file location matching URL path
• •SEO meta tags
• •Data loading (if needed)
• •Authentication (for protected routes)

Instructions

1. Determine Route Type

2. File Naming Rules

3. Route Structure

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

export const Route = createFileRoute("/path")({
  component: PageComponent,
  head: () => ({
    meta: [
      { title: "Page Title | App Name" },
      { name: "description", content: "Page description" },
    ],
  }),
});

function PageComponent() {
  return <div>Content</div>;
}

4. Data Loading with Convex

Use useQuery for reactive data:

import { useQuery } from "convex/react";
import { api } from "@convex/_generated/api";

function PageComponent() {
  const data = useQuery(api.resource.list);
  
  if (!data) return <Loading />;
  
  return <div>{/* render data */}</div>;
}

5. Dynamic Parameters

Access route params via Route.useParams():

function ProductPage() {
  const { productId } = Route.useParams();
  const product = useQuery(api.products.get, { id: productId });
  // ...
}

Constraints

• •DO NOT use useEffect for data fetching (use Convex useQuery)
• •DO NOT forget loading states for async data
• •DO NOT skip SEO meta tags
• •DO run npm run generate:routes if types are stale

Examples

See examples/ directory for:

• •public-route.tsx - Public page with SEO
• •protected-route.tsx - Auth-required page with data