An in-depth tutorial series exploring type-safe file-based routing, route trees, dynamic path parameters, Zod-validated search parameters, data loaders, and server-side rendering integration.
TanStack Router is a type-safe routing library for React and Solid. Unlike React Router, which relies on runtime matching, TanStack Router generates a fully typed route tree that the TypeScript compiler can verify. The installation process is split into two paths: the CLI scaffold for new projects, and the manual setup for existing projects. The…
The previous chapter installed TanStack Router and configured the Vite plugin. This chapter covers the root route, which is the foundation of the entire route tree. Every application has exactly one root route, created with createRootRoute or createRootRouteWithContext. The root route defines the layout that wraps every other route: the navigation header, the footer, the…
The previous chapter created the root route and the layout. This chapter covers the file-based routing convention: the directory structure under src/routes/, the file naming rules that map a file to a URL, and the generated routeTree.gen.ts that connects the files to the router. The LFCS exam does not test TanStack Router, but the front-end…
The previous chapter covered the file conventions that map a directory structure to URLs. This chapter covers the route tree itself: the nested data structure that the router uses to match URLs and the generated types that make navigation type-safe. A route tree is not a flat list. It is a hierarchy of routes, where…
The previous chapter covered the route tree and its type generation. This chapter covers the component that the user actually clicks to move between routes: the <Link> component. It is the TanStack Router equivalent of React Router’s <Link>, but the type safety is stricter. The to prop is not a generic string. It is a…