tanstack-router

## Overview TanStack Router is a fully type-safe router for React (and Solid) applications. It provides file-based routing, first-class search parameter management, built-in data loading, code splitting, and deep TypeScript integration. It serves as the routing foundation for TanStack Start (the full-stack framework). **Package:** `@tanstack/react-router` **CLI:** `@tanstack/router-cli` or `@tanstack/router-plugin` (Vite/Rspack/Webpack) **Devtools:** `@tanstack/react-router-devtools` ## Installation ```bash npm install @tanstack/react-router # For file-based routing with Vite: npm install -D @tanstack/router-plugin # Or standalone CLI: npm install -D @tanstack/router-cli ``` ## Core Concepts ### Route Trees Routes are organized in a tree structure. The root route is the top-level layout, and child routes nest underneath. ```tsx import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router' const rootRoute = createRootRoute({ component: RootLayout, }) const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: HomePage, }) const aboutRoute = createRoute({ getParentRoute: () => rootRoute, path: '/about', component: AboutPage, }) const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]) const router = createRouter({ routeTree }) ``` ### File-Based Routing File-based routing automatically generates the route tree from your file structure. Configure with Vite plugin: ```ts // vite.config.ts impor...