The Complete Production SOP: How to Deploy and Run TanStack Router 100% Type-Safe Fullstack Routing in Autonomous AI Agents

---
name: "tanstack-router-type-safe-routes"
description: "Achieve compile-time route validation, search params schemas, and loader data caching."
metadata:
  author: "TanStack"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "setup tanstack router"
  - "type safe search params tanstack router"
  - "loader prefetch tanstack router"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { TanStackRouterVite } from '@tanstack/router-plugin/vite';

export default defineConfig({
  plugins: [
    TanStackRouterVite({ target: 'react', autoCodeSplitting: true }),
    react(),
  ],
});

import { createFileRoute } from '@tanstack/react-router';
import { z } from 'zod';

const postSearchSchema = z.object({
  view: z.enum(['summary', 'full']).default('summary'),
  version: z.number().int().catch(1),
});

export const Route = createFileRoute('/posts/$postId')({
  validateSearch: (search) => postSearchSchema.parse(search),
  loader: async ({ params: { postId }, context }) => {
    const res = await fetch(`/api/posts/${postId}`);
    if (!res.ok) throw new Error('Post not found');
    return (await res.json()) as { id: string; title: string; content: string };
  },
  component: PostComponent,
});

function PostComponent() {
  const { postId } = Route.useParams();
  const { view } = Route.useSearch();
  const post = Route.useLoaderData();

  return (
    <article>
      <h1>{post.title} (ID: {postId})</h1>
      <p>Mode: {view}</p>
      <div>{post.content}</div>
    </article>
  );
}