Chapter 6: FAQ

Core Idea

The FAQ clarifies TanStack Router's positioning relative to Next.js and Remix/React Router, confirms it is not itself a full framework (TanStack Start builds a framework on top of it), and gives concrete guidance on committing the generated route tree file and conditionally gating route content.

Key Concepts

• Why choose TanStack Router: Next.js is the leading React framework but has non-standard abstractions and a steeper learning curve; Remix/React Router has strong web-standards-based APIs (Request/Response) that influenced TanStack Router's design, but has rigid architecture and type safety bolted on rather than built in.
• Is TanStack Router a framework?: No, not in the traditional sense, it doesn't handle bundling/deployment/server concerns itself. TanStack Start is the full-stack framework built on top of TanStack Router and Vite.
• routeTree.gen.ts should be committed to git: Even though it's generated, it's part of the application's runtime (used by the router at runtime, not just a build artifact), so other developers need it checked in to build the app.
• Root Route cannot be conditionally rendered: The root route always renders as the app's entry point. Conditional content (e.g. gated by auth) should use a Layout Route or Pathless Layout Route instead, with access control done via a beforeLoad check.

Code Examples

// src/routes/_pathless-layout.tsx
import { createFileRoute, Outlet } from '@tanstack/react-router'
import { isAuthenticated } from '../utils/auth'

export const Route = createFileRoute('/_pathless-layout', {
  beforeLoad: async () => {
    const authed = await isAuthenticated()
    if (!authed) {
      return '/login'
    }
  },
  component: PathlessLayoutRouteComponent,
})

function PathlessLayoutRouteComponent() {
  return (
    <div>
      <h1>You are authed</h1>
      <Outlet />
    </div>
  )
}

• What it demonstrates: Using a pathless layout route's beforeLoad to gate access to all child routes with an auth check and redirect.

Key Takeaways

1. Always commit routeTree.gen.ts to version control, it is runtime source, not a disposable build artifact.
2. Do not try to conditionally render the root route's component; use a (pathless) Layout Route plus a beforeLoad guard for auth-gated sections instead.
3. TanStack Router intentionally positions itself between "just a router" and "a framework"; reach for TanStack Start when full-stack framework concerns (bundling, deployment, server functions) are needed.

Connects To

• Ch 4: Decisions on DX gives the deeper origin story referenced in the FAQ's routing philosophy answer.
• Ch 5: Comparison provides the feature-by-feature backing for the FAQ's "why choose TanStack Router" answer.