TanStack Router Has a Free API That Most Developers Don't Know About

TanStack Router is a fully type-safe router for React that goes far beyond React Router. It offers built-in search param validation, loader-based data fetching, and first-class TypeScript support.

Type-Safe Route Definitions

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

export const Route = createFileRoute("/posts")({ 
  validateSearch: z.object({
    page: z.number().default(1),
    filter: z.enum(["all", "published", "draft"]).default("all")
  }),
  loaderDeps: ({ search }) => ({ page: search.page, filter: search.filter }),
  loader: async ({ deps }) => {
    return fetchPosts(deps.page, deps.filter);
  },
  component: PostsPage
});

function PostsPage() {
  const posts = Route.useLoaderData();
  const { page, filter } = Route.useSearch();
  return <div>{posts.map(p => <Post key={p.id} post={p} />)}</div>;
}

Type-Safe Navigation

import { Link, useNavigate } from "@tanstack/react-router";

// Fully typed — TS errors if params/search are wrong
<Link to="/posts/$postId" params={{ postId: "123" }} search={{ tab: "comments" }}>
  View Post
</Link>

const navigate = useNavigate();
navigate({ to: "/posts", search: { page: 2, filter: "published" } });

Route Context

export const Route = createFileRoute("/dashboard")({ 
  beforeLoad: async ({ context }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({ to: "/login" });
    }
  },
  loader: ({ context }) => fetchDashboard(context.auth.userId)
});

Key Features

• 100% type-safe routes, params, search params
• Built-in data loading with loaders and prefetching
• Search param validation with Zod integration
• Devtools for route inspection
• SSR support out of the box

---

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at [e-mail] for custom solutions.