TanStack

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

Join

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

ratty-blush

5/7/2025

Setting global search params

Hi, so I have this setup ``` export const rootRoute = createRootRoute({ component: Root,...

extended-salmon

5/6/2025

bad setState

I use tanstack query in next.js app router. When I use useSuspenseQuery I get this error Cannot update a component while rendering a difference component...

equal-jade

5/6/2025

Caching a data loader's output with staleTime not working

I'm new to Tanstack Router/Start and am looking to implement standard ISR/stale while revalidate behaviour: 1) Data gets a bundled at build time 2) Cached data is served without the fetch functions being invoked for 30 minutes (staleTime) 3) When the staleTime is hit, serve cache data one more time, rebuild cache under the hood for the next request...

adverse-sapphire

5/6/2025

How to achieve type safety in this scenario?

I have the following routes: /route/$id/tab1 /route/$id/tab2 /route/$id/tab3 ...

afraid-scarlet

5/5/2025

Directory Structure Best Practice

Which one makes more sense? Why? 1. Combined: where you put each features extra directories like components and services inside the routes directory. 2. Separated: where you put each features extra directories inside a shared component or feature directory....

rival-black

5/5/2025

Layout only files

Hey guys, here is my test of files/folders structure for my auth part. My goal is to have: - /login (login page) - /active/{generate/check/post} - /password/{generate/check/reset}...

other-emerald

5/5/2025

useNavigate to change search params without remounting the route componen

I'm trying to use useNavigate() to change just the search params, but it unnecessarily flashes due to unmounting and mounting the route component again. Is there a mode of operation where it "just" updates the URl with history push but doesn't re-mount the Route component? My code: ```typescript...

conscious-sapphire

5/5/2025

i18n Routing - Question

Hello I would like to add i18n support to my TanStack Start app I was hoping to support website.com/my/path (english)...

fascinating-indigo

5/5/2025

How would you make chatgpt.com ?

The index page has chat-box + options, center screen. When you send a message, the chat-box animates downward (the contents are gone, but any options are still selected) and the original contents are displayed as a message. The URL changes to reflect the uuid e.g, /<uuid> and a loading dot appears where the message will be streamed in. Right now, I'm struggling with how the chat box animates, message is kept up, URL changes, and the state is maintained even though different files are being pr...

xenial-black

5/4/2025

routeRules inject header

I'd like to proxy all requests to an API but inject a header into the real API request. I know routeRules exist, but I can't inject a header in there. Is there any easy way in Router/Start to do something like this?

magic-amber

5/4/2025

Error in renderToPipeableStream: ReferenceError: exports is not defined

Hi, I having problems importing a compiled package with turborepo.

fascinating-indigo

5/4/2025

root.tsx vs main.tsx

How do I decide what to put in src/main.tsx vs src/routes/__root.tsx? I am using Zustand, TS Query and Router, and ShadCN. I don't know where I should setup Zustand and TS Query or where I should put my sidebar....

equal-jade

5/3/2025

Layouts in file-based routing: can they be nested inside folders?

Hi! I have a question about TanStack Router and file-based routing. If I use file-based routing, do layouts always have to live at the root of the /routes folder? For example, in Next.js, you can organize files like this:...

continuing-cyan

5/3/2025

Seeking guidance on design system package extraction and encapsulation with TanStack Router

I’m integrating Catalyst UI (Headless UI + TailwindCSS, docs) into a React app using TanStack Router, and trying to preserve both design system encapsulation and router-aware type safety goodies at the point of use. Context - I’m extracting our UI kit into a pnpm workspace package, which should remain agnostic to TanStack Router (and unaware of the router instance)....

deep-jade

5/3/2025

Question on pathless layout vs route groups

I'm trying to understand the differences between these 2 features of Tanstack route and why should I use one over the other? They both seem to achieve the same results. Pathless layout ``` routes/ ...

adverse-sapphire

5/2/2025

Using dollar sign in path param?

I need a URL to include a literal dollar sign, so the URL should be /currency/$ and the $ should not represent a parameter/variable but just a plain string. I'm using the file based router. Is there a way to escape the dollar sign?

unwilling-turquoise

5/2/2025

How to change pendingComponent behavior?

Hi everyone, I'm working with the TanStack Router and trying to utilize the pendingComponent feature. I want it to display only during the initial page load when navigating to a new route, but currently, it shows up every time a query within the loaded component is triggered. Does anyone know how to restrict the pendingComponent so that it only shows during route transitions and not during subsequent query calls in the component? Any guidance or examples would be greatly appreciated!...

harsh-harlequin

5/2/2025

Type error in `params.parse` callback with a route that include a path param

I have a file src/routes/_restricted/projects/$projectId.content.tsx with this code : ```typescript import { createFileRoute } from "@tanstack/react-router"; ...

fascinating-indigo

5/2/2025

How can I make a list of urls type-safe with TanStack Router in a custom Header component?

Hi! I’ve read the Custom Link guide and successfully created a custom link using TanStack Router. I also have a <Header> component that takes a list of links like this: ```typescript...

provincial-silver

5/2/2025

Issues With Outlet & Layouts

I have a page that is supposed to display the Tabs, and then also automatically open a table. Unfortunately in the redirect, the Tabs are not displayed Instead it just displays the temporary Board Page I made....

Previous Next

Gaming

Programming

TanStack

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

TanStack

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