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

adverse-sapphire
adverse-sapphire6/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...
plain-purple
plain-purple6/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.
harsh-harlequin
harsh-harlequin6/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?
fascinating-indigo
fascinating-indigo6/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 :...
flat-fuchsia
flat-fuchsia6/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)...
genetic-orange
genetic-orange6/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
adverse-sapphire
adverse-sapphire6/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....
metropolitan-bronze
metropolitan-bronze6/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 ...
dependent-tan
dependent-tan6/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?...
dependent-tan
dependent-tan6/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
deep-jade
deep-jade6/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:...
yelping-magenta
yelping-magenta6/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...
stormy-gold
stormy-gold6/11/2025

is there any documentation for `verboseFileRoutes`?

what value should I use?
fascinating-indigo
fascinating-indigo6/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
fair-rose
fair-rose6/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....
metropolitan-bronze
metropolitan-bronze6/10/2025

component render running before "beforeLoad"

__root.tsx ```tsx export const Route = createRootRouteWithContext<{ auth: {...
harsh-harlequin
harsh-harlequin6/10/2025

Invalidate router inside beforeLoad

Hey, I'm using tanstack start. Is there a way to invalidate the router inside beforeLoad? I update a language cookie in beforeLoad (so it triggers on link hover and on click : also I don't know if this is the intended behaviour but when I hover a link, it triggers a first time, when I left click it triggers a second time, and when I release it triggers a third time, I was expecting it to only trigger once after hover, or at most twice after hover and click. Also, in beforeLoad, preload is always false). But when I actually click the link, despite the cookie has changed, the loader doesn't fires so the language texts are not updated. ```js export const Route = createRootRouteWithContext<RouterContext>()({ head: () => ({ // ......
correct-apricot
correct-apricot6/10/2025

I have a problem with Search Params

```jsx import { createFileRoute, useNavigate, useSearch,...
absent-sapphire
absent-sapphire6/10/2025

Search mask not working on initial load

I'm finding that if I try to use navigate or even redirect on my initial URL to mask search params, it does not work. E.g. in https://codesandbox.io/p/devbox/stoic-cerf-qj7jyh ...
fascinating-indigo
fascinating-indigo6/9/2025

[BEST PRACTICE] - Interdependent queries in the page loader function

Hi guys ! 👋 I'm wondering what is the best way to fetch multiple data, using TanStack Query, in the page loader function ? Note that almost every request i need, depends on the result of the request n-1 I would do something like :...