TanStack

T

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

helpful-purple
helpful-purple6/16/2025

Loading data in the <Route> with `useSuspenseQuery` forces suspending and scroll reset (w/ example)

I'm trying to fetch data in the loader of a <Route /> that depends on search params and I'm not able to figure out how to do it right (?). I created a sample repo: https://stackblitz.com/edit/tanstack-router-aiytgf7a?file=src%2Froutes%2Findex.tsx Current behavior...
optimistic-gold
optimistic-gold6/16/2025

Is it possible to statically generate routes?

I have blog post data stored in my source code (I generate it from markdown files) so that it is statically available when deploying my app. I have my blog post page setup like this which works nicely: ``` import { createFileRoute } from '@tanstack/react-router';...
genetic-orange
genetic-orange6/16/2025

ValidateLinkOptionsArray using "from" change of behaviour

I have been making use of ValidateLinkOptionsArray and ValidateFromPath to create page tabs as shown in this example: ```typescript export interface MenuProps< TRouter extends RegisteredRouter = RegisteredRouter,...
rival-black
rival-black6/16/2025

Is it possible to lazy load route tree instead of single lazy component?

According to the documentation at https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting, I can create a lazy route with a component, but I want to lazy-load an entire nested route tree. Is that possible?
ambitious-aqua
ambitious-aqua6/16/2025

Exporting the root route with a bottom `export { Route }` doesn't seem to work

Hey there. I'm not sure if this is a bug or intended behaviour, so I'm posting this here first. In my __root.tsx file I have this: ```...
No description
jolly-crimson
jolly-crimson6/16/2025

Convert NavigationOptions -> RouteId

In our application, we have a configuration file which routeIds are active in the application. This let's use put routes behind feature flags or prevent specific users from accessing a route based on whether we decide they are allowed access. Auth is handled differently, but for example, if we are mid way through a feature, AB testing, or want to only enough a feature in development, this config can be used to determine if the route being loaded is active in beforeLoad. We have two functions for this 1. isRouteActive(beforeLoadOpts) - Isomorphic, runs in beforeLoad 2. useIsRouteActive({ routeId }) - reactive, works in components...
ambitious-aqua
ambitious-aqua6/15/2025

Is it possibelt to rename the `routeTree.gen.ts` file to `route-tree.gen.ts`?

Is there any way this file name can be configured somewhere? I've always preferred to use kebab-case for my files instead of camelCase, and I'm wondering if I can rename this somehow. Thanks.
flat-fuchsia
flat-fuchsia6/15/2025

Quick ?: Do I track .tanstack/ in version control like routeTree.gen.ts?

FAQ states that routeTree.gen.ts should be tracked, but is it also necessary to track the .tanstack/ dir?
afraid-scarlet
afraid-scarlet6/14/2025

Invalidate context

Hey guys ! 👋 I think i'm missing something on how to properly invalidate the root context. I created a router with a context like this :...
plain-purple
plain-purple6/14/2025

Error after upgrading to v1.121.0 - Invariant failed: Could not find a nearest match!

```bash [vite] connected. Error in renderToPipeableStream: Error: Invariant failed: Could not find a nearest match! at invariant (file:///Users/josippapez/Desktop/brisk-fit-web-static/node_modules/tiny-invariant/dist/esm/tiny-invariant.js:12:11) at Object.select (/Users/josippapez/Desktop/brisk-fit-web-static/node_modules/@tanstack/react-router/src/useMatch.tsx:104:7)...
conscious-sapphire
conscious-sapphire6/14/2025

confused about TS intellisense for routes in my app

I am exploring tanstack router for a project and I am seeing these two suggestions in my editor which I am not sure if its valid or not. I can also say that this happened when I added dedicated route file in (app) and (auth). I wanted different layout for both directories. Can someone validate if I am on right track?...
No description
jolly-crimson
jolly-crimson6/14/2025

RegisteredRouter Reference Being Lost

To be upfront, I can only replicate this in my production app with ~200 routes, so if there is not an answer that someone knows off the top of their head, please feel free to just tell me this isn't a router problem (since TBH I suspect it is not). In summary, quite often when we are working with useParams, useSearch and other router related hooks, they will randomly swap from using the RegisteredRouter in the types, to AnyRouter. Going back to the file that has our type declaration for RegisteredRouter and saving, fixes it, until we save the original file or make modifications, and then eventually it goes back to AnyRouter again. What is interesting here, is that this happens very frequently (every 1-2 file changes) on the raw hooks, but VERY rarely happens when using getRouteApi to define our hooks....
conscious-sapphire
conscious-sapphire6/14/2025

Fetching multiple resources in Loader using ensureQueryData

I had a question about handling multiple data fetches in a loader using ensureQueryData. I followed the example from the docs and added another queryOptions for a second fetch. Is this the recommended approach? ```tsx // src/routes/posts.tsx ...
absent-sapphire
absent-sapphire6/14/2025

how to best update path params?

hey all :blob_wave: My use case is that I have a workspace switcher, and there are multiple pages where the user can be inside the dashboard. If they switch from one workspace to another, we would like to keep them in the same page rather than set them at the base of the dashboard. What is the best way with tanStack Router to achieve this?...
statutory-emerald
statutory-emerald6/13/2025

How to render modal/dialog as route/Outlet from Index route

Im working with @tanstack/react-router and Im trying to render a Modal/Dialog component on the /admin/users . To do that, I put an Outlet within the parent index.tsx route. However, when I render the route for the modal @ /admin/users/add-user, the background index UI (from /admin/users ) seems to unmount entirely rather than displaying beneath the Modal. Im reasonably sure that the issue is simply because Im not properly organizing my routes. While its not a "minimal" repro, you can see my current route setup with the bugs @ https://github.com/lancej1022/enterprise-saas/tree/main/apps/web/src/routes/(authenticated) . If its easier, you can also view the route layout in the attached screenshot....
No description
rising-crimson
rising-crimson6/13/2025

Updating tanstack router causes crash

Update 1.120.5 -> 1.121.2 I updated the deprecated vite plugin import { TanStackRouterVite } from "@tanstack/router-plugin/vite"; -> import { tanstackRouter } from "@tanstack/router-plugin/vite"; plugin usage:...
wise-white
wise-white6/11/2025

Route file does not export any route piece

Sandbox: https://stackblitz.com/edit/vitejs-vite-hc6bcytw I created a new React project using Tanstack Router. This is the Vite configuration ```ts...
adverse-sapphire
adverse-sapphire6/11/2025

It seems like the type inference of the useSearch hook is weird after the 1.121.0 update.

After the update, I got a type error while executing the tsc command, so I checked and found that the return type of useSearch was inferred as any. Are there more users who had the same problem as me? Please let me know if I did something wrong.
No description
correct-apricot
correct-apricot6/11/2025

[router-generator-plugin] undefined is not an object (evaluating 'this.environment.config')

Hey all, first time posting about this but this is the third time a non breaking update has broken my app 😭 (package.json currently locked to "^1.58.12") I am getting this error on build, anyone able to point me in the right direction? SPA Vite app using the plugin....