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

flat-fuchsia
flat-fuchsia8/17/2025

Errors in deployment after migrations

For some reason, after upgrading from using Vinxi to Nitro in TanStack Start, I'm unable to view my deployed site. The build output files are structured in a way that Coolify or Vercel no longer understands.
adverse-sapphire
adverse-sapphire8/16/2025

What if I want a layout route named “`index`”?

If the file posts.index.tsx has been made to mean /posts/ and not /posts/index then how can layout route /posts/index be accomplished? Can this be done without changing the indexToken config option away from “index”? * posts.index.tsx -> /posts/ * posts.[index].tsx -> /posts/[index] * posts.index.route.tsx -> /posts/...
sensitive-blue
sensitive-blue8/15/2025

Techniques for reducing request waterfalls for dependent queries in loaders

I'm using TanStack Router, Query, and Start (though I think Start is irrelevant for this Q) I'm wondering about loaders that are run for client-side transitions that would be run more effectively on the server-side. Consider the following: ```ts...
like-gold
like-gold8/15/2025

Is it possible to create a type of a subset of the routes for LinkOptions?

Lets say we have these routes ``` /inbox /inbox/$emailId /clients...
provincial-silver
provincial-silver8/14/2025

Safe way to use the createRouter singleton without circular imports?

Hey all! Quick question, in a React + Vite app, is the router singleton (from createRouter) actually meant to be imported and used anywhere in the app? I’ve noticed that it can easily cause circular import issues — the singleton imports the route tree and the route tree is importing the page definitions (component). If a page then imports the singleton, it loops back and causes problems. Has anyone figured out the recommended way to use the router instance without running into these circular imports?...
abundant-blush
abundant-blush8/14/2025

Auth best practice: middleware or root beforeload?

I am just curious what people prefer and why they think it is better than the other.
fascinating-indigo
fascinating-indigo8/13/2025

Accessing context in route `head`

Is there a specific reason you can not access the route context in a route head? I am passing my i18n context from the root, and it would be nice to be able to use it there to I can call i18n._("This page title")...
modern-teal
modern-teal8/12/2025

Any idea why "Loading" text is not shown instantly in the following example? Video attached.

```ts export const Route = createFileRoute('/_authed/posts')({ loader: () => fetchPosts(), component: PostsComponent, pendingComponent: () => <div>Loading...</div>,...
adverse-sapphire
adverse-sapphire8/12/2025

In file-based routing, how to avoid duplicating files?

I'm puzzling over this situation. Let's say I have a multi-step edit flow and create flow that have some differences but mostly have the same steps, which are sub-routes. - entity/edit/$id (directory) - route.tsx (outlet, data fetch) - options.tsx...
rare-sapphire
rare-sapphire8/12/2025

Does onResolved fire on initial page load in TanStack Router?”

Hi, I have a question about router.subscribe in combination with the default browser routing (createRouter). If I subscribe like this: ```router.subscribe('onResolved', (evt) => {...
genetic-orange
genetic-orange8/12/2025

Esbuild JS API error with Tanstack Router Plugin

Hey! When I run the CLI command, I get no errors, but when I run it through js api, I get errors about running generator before initialization. I tried running it with same config as in example on GitHub, but nothing worked.
No description
harsh-harlequin
harsh-harlequin8/11/2025

Non-redirected authentication: parallel routes

https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes#non-redirected-authentication This section in the docs mentions you can "choose to not redirect users to a login page, and instead keep the user on the same page and show a login form that either replaces the main content or hides it via a modal". I'd like to present a login modal that gets triggered any time the user is unauthenticated and tries navigating to a protected route....
robust-apricot
robust-apricot8/11/2025

Using beforeLoad to inject data into context for deeply nested routes has performance issues

In our application, we have routes that are pretty deeply nested that need access to the context from the parent routes. For example, consider the following: https://example.com/dashboard/users/$userId/cars/$carId/parts/$partId ...
wise-white
wise-white8/11/2025

Search params are automatically converted to number type.

I have a search param that is and id, for now the ids are numbers, eg 123, but they could also be uuids, which are just strings. If I type my id param as a z.string(), but pass 123 the validation fails, since it converts it to a number. How can I force it to accept it as a string? Using z.coerce changes the param to %22123%22 which I don't want.
wise-white
wise-white8/11/2025

How to redirect and pass search params?

I have a legacy route that has to be redirected to a new route, and I need to pass all search params passed to that route, how do I achieve this using a zod validator?
frozen-sapphire
frozen-sapphire8/11/2025

Exclude children from custom link component

Hey 👋 Is it possible to exclude children from a custom link component created with createLink()? We have a IconLink component that accepts a label property of type string and we don't want to accept children....
wee-brown
wee-brown8/11/2025

Filtered Memory History in Tanstack Router

Heylo, I have a component in my app that renders through a modal which is intended to be a mini-version of the app controlled through memory history. I've achieved this using two RouterProviders using the same route tree. I'd like to implement a behaviour where if I navigate out of specific routes, it will lead me to a ContinueOutside component, which will have a link to navigate me out (thereby taking me out of the memory history'd router) I've got a very crude implementation as follows and would like to know if there was a better and typesafe way to do this in Tanstack Router....
like-gold
like-gold8/10/2025

Production build FOUC

I seem to be having an issue with production builds having FUOC on the initial render. My Production builds are launched via Vercel I am using the following: "@tanstack/react-query": "^5.66.0",...
No description
like-gold
like-gold8/10/2025

Google Tags and scripts

What is the proper way to add google tags and analytics to a site? The scripts in header doesn't seem to like scripts with content in it.
adverse-sapphire
adverse-sapphire8/8/2025

What is params={true} in a Link component?

This property is used in the Kitchen Sink examples in the docs, but I can't find documentation on params as a boolean. ```jsx React.useEffect(() => { navigate({...