Every web app has to answer one question for each click: which page goes with this address? That job belongs to a router. So what is TanStack Router? It’s a router for React and Solid apps that checks your links and addresses with TypeScript, and it’s the routing behind TanStack Start.
What Does a Router Do?
A router connects web addresses to pages. When someone opens /books, it shows the book list; when they click a link, it changes the page without reloading the whole site. Addresses can also carry values:
- Path parameters are part of the path, such as the
2in/books/2, which picks one book. - Search parameters come after the question mark, such as
?sort=price, and often hold filters and sorting.
What Is TanStack Router?
Its documentation describes TanStack Router as a router for building React and Solid applications. It’s free and open source under the MIT License, and it’s made by TanStack, the same team behind TanStack Start.
What Makes TanStack Router Different
It does what you expect from a router: nested routes and layouts, prefetching, error handling and server rendering. Its documentation lists what it adds on top:
- Type-safe navigation. TanStack Router knows every route, with its path, parameters and settings. TypeScript then checks each link as you write it, so a mistyped address or a missing value shows up before you run the app.
- Search parameters as real state. Search parameters are read as JSON, validated and typed, rather than handled as loose text. That makes the address a good place for filters and sorting that should survive a refresh or a shared link.
- Built-in loaders with caching. Each route can load its data before it shows, and the router keeps that data for reuse. It’s also designed to work with data libraries such as TanStack Query.
- Route context. A route can pass shared data, such as the signed-in user, to every route below it.
- Routes as files or as code. You can define routes as files in a folder, as code, or both.
File-Based Routing in a Nutshell
With file-based routing, each page is a file in a routes folder, and the file’s name sets its address. TanStack Router’s Vite plugin, or its CLI, reads that folder and generates a route tree file, routeTree.gen.ts, that connects everything. The router’s FAQ says to commit that file to Git, because it’s part of your app, not a throwaway build file.
TanStack Router vs TanStack Start
TanStack Router’s FAQ says it isn’t a framework in the traditional sense, because it doesn’t cover the other full-stack jobs. TanStack Start is that framework: it’s built on TanStack Router and Vite, and relies on the router for all of its routing. Start adds the server: full-page server rendering, server functions, server routes and middleware.
- Use TanStack Router on its own for an app that runs completely in the browser and never needs its own server.
- Use TanStack Start when the app needs server code, such as a database, secrets or sign-in.
Everything you learn about routing carries over: the TanStack Start Tutorial on this site teaches TanStack Router’s routing as part of TanStack Start.
Common Mistakes
| Mistake | What happens | Do this instead |
|---|---|---|
Editing routeTree.gen.ts by hand | Your changes are replaced the next time the file is generated | Change the files in the routes folder instead |
Leaving routeTree.gen.ts out of Git | Other people can’t build the app from your code | Commit it, as the router’s FAQ says |
| Reading search parameters as plain text | Numbers and lists arrive as strings and need hand-written parsing | Validate them in the route, so they arrive typed |
| Expecting server features from the router alone | There’s nowhere for database code or secrets to run | Use TanStack Start when you need a server |
FAQ
Is TanStack Router free?
Yes. It’s open source under the MIT License, the same license as TanStack Start.
Does TanStack Router work with Solid?
Yes. It’s built for React and Solid applications. This site’s posts use React.
Do I need TanStack Start to use TanStack Router?
No. TanStack Router works on its own. TanStack Start is only needed when you want the server features on top.
Should I commit routeTree.gen.ts to Git?
Yes. The router’s FAQ says the file is part of your app’s source code, so other developers need it to build the app.
Conclusion
TanStack Router is a free router for React and Solid apps that checks your links and addresses with TypeScript, treats search parameters as real state and loads each page’s data with built-in caching. On its own, it’s ideal for apps that run in the browser. With a server, it’s the routing inside TanStack Start.
Additional Resources
- TanStack Router Overview, in the official documentation
- TanStack Router FAQ
- TanStack Router comparison with other routers
- TanStack Start Overview
Related
- TanStack Start Tutorial — Part 1: What Is TanStack Start?
- TanStack Start vs Next.js: What’s the Difference?
- Is TanStack Start Free for Commercial Use? The MIT License Explained
TanStack, React and other names mentioned are trademarks of their respective owners. JD Bots isn’t affiliated with or endorsed by TanStack.
