React INTERMEDIATETanStack Router
100% type-safe React router with file-based routing, data loading, and search params state management
12 min read
tanstackrouterroutingreacttypescripttype-safedata-loading
Table of Contents
Setup & Installation
Installing and configuring TanStack Router
Installation
Install TanStack Router with bundler plugin
bash
💡 Router plugin is required for file-based routing
⚡ Supports Vite, Webpack, Rspack, and Esbuild
🔍 Plugin auto-generates route tree and types
🎯 TypeScript v5.3+ recommended for best experience
installationsetupvite
Router Setup
Create and configure the router instance
typescript
💡 Type registration enables full type inference
⚡ RouterProvider renders your route tree
🔍 routeTree.gen.ts is auto-generated by plugin
🎯 Set context for global data access in routes
routersetuptypescript
Root Route
Define the root layout route
typescript
💡 __root.tsx must be in routes folder
⚡ <Outlet /> renders matched child routes
🔍 Wrap entire app with root layout
🎯 notFoundComponent handles 404 errors
rootlayoutoutlet
File-Based Routing
Using the filesystem to define routes
Flat Routes (Dot Notation)
Use dots to represent route hierarchy
typescript
💡 Dots (.) represent nesting levels
⚡ Best for deeply nested routes
🔍 No folder nesting required
🎯 Dollar sign ($) for dynamic params
flat-routesfile-basedstructure
Directory Routes
Use folders to represent route hierarchy
typescript
💡 Folders represent URL segments
⚡ Good for organizing related routes
🔍 index.tsx renders at folder path
🎯 Can mix with flat routes
directory-routesfile-basedfolders
Special Route Files
Pathless layouts, catch-all, and index routes
typescript
💡 Underscore (_) prefix for pathless layouts
⚡ $.tsx catches unmatched routes
🔍 $$.tsx for multi-segment splat routes
🎯 index.tsx for exact path matches
layoutspathlesscatch-allwildcards
Navigation & Links
Navigating between routes
<Link> Component
Type-safe navigation with Link
typescript
💡 Fully type-safe to, params, and search
⚡ activeProps for styling active links
🔍 Automatic prefetching on hover
🎯 search function for merging params
linknavigationtype-safe
useNavigate Hook
Programmatic navigation
typescript
💡 Use for programmatic navigation
⚡ Type-safe params and search
🔍 Supports relative paths (./edit, ..)
🎯 replace option for history control
navigateprogrammatichook
Redirect
Redirect from loaders and actions
typescript
💡 throw redirect() to exit execution
⚡ Use in beforeLoad for auth guards
🔍 Can redirect from loader if data missing
🎯 Pass search.redirect for return URLs
redirectauthguards
Data Loading
Loading data with loaders and hooks
Route Loader
Define loader function to fetch data
typescript
💡 Loader runs before component renders
⚡ Built-in SWR caching with staleTime
🔍 loaderDeps controls cache keys
🎯 abortController for request cancellation
loaderdatafetch
useLoaderData Hook
Access loader data in components
typescript
💡 getRouteApi for components without route access
⚡ Fully type-safe loader data
🔍 Can access parent route loader data
🎯 Data available before component renders
useLoaderDatahookdata-access
Deferred Data Loading
Stream data and show content immediately
typescript
💡 defer() for non-critical data streaming
⚡ Show page immediately with critical data
🔍 Use Suspense for loading states
🎯 Great for improving perceived performance
deferstreamingsuspense