TanStack Router Patterns

# TanStack Router Patterns for Google Antigravity IDE

Build type-safe routing with TanStack Router using Google Antigravity IDE. This guide covers route definitions, loaders, search params, navigation guards, and code splitting patterns.

## Root Route Setup

```typescript
// src/routes/__root.tsx
import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
import type { QueryClient } from "@tanstack/react-query";

interface RouterContext {
  queryClient: QueryClient;
  auth: { isAuthenticated: boolean; user?: User };
}

export const Route = createRootRouteWithContext<RouterContext>()({
  component: RootComponent,
  notFoundComponent: NotFound,
  errorComponent: ErrorBoundary,
});

function RootComponent() {
  return (
    <>
      <Header />
      <main><Outlet /></main>
      <Footer />
    </>
  );
}
```

## Route with Data Loading

```typescript
// src/routes/posts/$postId.tsx
import { createFileRoute, notFound } from "@tanstack/react-router";
import { z } from "zod";

const postSearchSchema = z.object({
  showComments: z.boolean().default(true),
  commentSort: z.enum(["newest", "oldest", "popular"]).default("newest"),
});

export const Route = createFileRoute("/posts/$postId")({
  validateSearch: postSearchSchema,
  loaderDeps: ({ search }) => ({ showComments: search.showComments }),
  loader: async ({ params, context, deps }) => {
    const post = await context.queryClient.ensureQueryData({
      queryKey: ["posts", params.postId],
      queryFn: () => getPost(params.postId),
      staleTime: 1000 * 60 * 5,
    });

    if (!post) throw notFound();

    const comments = deps.showComments
      ? await context.queryClient.ensureQueryData({
          queryKey: ["posts", params.postId, "comments"],
          queryFn: () => getComments(params.postId),
        })
      : null;

    return { post, comments };
  },
  head: ({ loaderData }) => ({
    meta: [
      { title: loaderData?.post.title },
      { name: "description", content: loaderData?.post.excerpt },
    ],
  }),
  component: PostPage,
  pendingComponent: PostSkeleton,
});

function PostPage() {
  const { post, comments } = Route.useLoaderData();
  const { showComments, commentSort } = Route.useSearch();
  const navigate = Route.useNavigate();

  const toggleComments = () => {
    navigate({ search: (prev) => ({ ...prev, showComments: !prev.showComments }) });
  };

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <button onClick={toggleComments}>{showComments ? "Hide" : "Show"} Comments</button>
      {showComments && comments && <CommentSection comments={comments} sort={commentSort} />}
    </article>
  );
}
```

## Protected Routes

```typescript
// src/routes/_authenticated.tsx
import { createFileRoute, redirect, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: "/login",
        search: { redirect: location.href },
      });
    }
  },
  component: () => <Outlet />,
});
```

## Type-Safe Navigation

```typescript
// src/components/Navigation.tsx
import { Link, useNavigate } from "@tanstack/react-router";

function Navigation() {
  const navigate = useNavigate();

  return (
    <nav>
      <Link to="/" activeProps={{ className: "active" }}>Home</Link>
      <Link to="/posts/$postId" params={{ postId: "123" }} search={{ showComments: true }}>
        View Post
      </Link>
      <Link to="/dashboard" preload="intent" preloadDelay={100}>Dashboard</Link>
      <button onClick={() => navigate({ to: "/settings" })}>Settings</button>
    </nav>
  );
}
```

## Best Practices for Google Antigravity IDE

When using TanStack Router with Google Antigravity, define route trees for full type safety. Use loaders for data fetching with React Query. Implement search param validation with Zod. Create layout routes for shared UI. Let Gemini 3 generate route definitions from your page structure.

Google Antigravity excels at scaffolding type-safe routing with proper data loading patterns.