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

xenial-black
xenial-black3/27/2025

How to debug error "Expected to find a dehydrated data on window.__TSR_SSR__.dehydrated"

I am seeing this error in my SSR setup with Vite. I've been trying to follow the directions at https://tanstack.com/router/latest/docs/framework/react/guide/ssr#ssr but can't seem to fix this error.
useful-bronze
useful-bronze3/26/2025

Mdx as route

Hi!, It is posible to add mdx file as route in file based routing?
rare-sapphire
rare-sapphire3/26/2025

Search Params: manually update search params

Hi all. I just wanted to ask if anybody managed to update the search params manually from a onSubmit function of a Form? I've used react-routers useSearchParams which returns a tuple of the routes searchparams state and a setter for it....
helpful-purple
helpful-purple3/26/2025

Pass something to loaderData when notFound in page level

I'm using router with start, i wondering how to make meaningful error title we throw notFound (for the whole page) function in the createServerFn side. I manage to make it work with the code below but there is some flashes before the page show the error title ```ts export const getProductBySlug = createServerFn({ method: "GET" }) .handler(async({data}) => {...
rare-sapphire
rare-sapphire3/26/2025

Route Check - Redirect

Hi all. Have to ask here - since I think I'm missing it in the docs... I wanted to ask if I can somehow check if the trigerred route was redirected to or was it a direct URL input?...
xenial-black
xenial-black3/26/2025

Has anyone hosted a Tanstack rotuer app on Firebase?

I'm interested in hosting on firebase/google instead of other providers like vercel... has anyone done this yet? 😮
optimistic-gold
optimistic-gold3/25/2025

Transition from nextjs app router to tansack router

Hello, I have a Next.js project using the App Router CSR, and I’m considering transitioning to TanStack Router. I’d like to test it out by implementing it in a specific section of my project. For example, I want to use TanStack Router exclusively for the /about route, which includes a few nested routes. Would it be possible to configure TanStack Router to handle just that section while keeping the rest of the project on the App Router? I’m initially thinking of using the virtual file routes but curious to see if it’s even possible , thank you!...
typical-coral
typical-coral3/25/2025

To support SSR, is it necessary to use @tanstack/react-start?

I followed the tutorial on the official documentation to use @tanstack/react-start, as shown below: In server.entry.tsx ``` const router = createRouter(); ...
fascinating-indigo
fascinating-indigo3/24/2025

Redirect in beforeLoad is causing infinite routing

I just notice that navigating to route whose parent route has a redirect in it's beforeLoad method, routes infinitely. i.e i navigate to '/patients', in it's beforeLoad method, i redirect to another route, say '/patients/approved', instead of redirecting as expected it causes a loop between the two routes or any other route i navigate to after this. Has anyone experience this before? It was working fine before, i don't what i did wrong....
No description
wise-white
wise-white3/24/2025

tanstack start server entry

I see tanstack start has an ssr entry which gets recreated on every request i was wondering if there's a server entry that's durable and where one can instantiate DBs like mongoose
ratty-blush
ratty-blush3/24/2025

Best way to detect pathless routes?

I have a sort of a 2d navigation in my app, and have an idea to use pathless layout routes to detect where we are in the "matrix". See attached image, from this file structure I want to detect: - level (root, retailer, machine) - category (commercial, logistics, operational) What is the best way to do this? I have two ways that work now:...
No description
ratty-blush
ratty-blush3/24/2025

How to model routes for Tabs component

Let's say I have the following routes: /machine/123/tickets /machine/123/pricing My current folder structure:...
vicious-gold
vicious-gold3/24/2025

Route.useloaderdata() is of type any

Hey all, Getting this very strange issue, I can't even do a repro outside of my codebase, wondering where I should be looking... In the code below, myTables is of type any, despite the route loader clearly returning a number which is typically inferred and should be number....
ratty-blush
ratty-blush3/24/2025

Redirecting with dynamic slug

How are you supposed to navigate with type safety to a path with dynamic slug? i.e. lets say I have a route /org/$slug/dashboard which checks some state in beforeLoad or loader and decides to redirect to /org/${params.slug}/onboarding. I get type errors doing the following:...
robust-apricot
robust-apricot3/23/2025

Better Auth Session Not Loading in TanStack Router Application

I'm encountering an issue with Better Auth sessions in my TanStack Router application. The session data appears correctly in network responses, but it's not being loaded or accessible in my React components. Project Setup: Better Auth version: 1.1.21 TanStack Router for routing...
adverse-sapphire
adverse-sapphire3/23/2025

if beforeLoad is present and I refresh the page on about route, pending state don't resolve

1. go to about route 2. refresh the page 3. check the pending status of the router state router state with status==="pending" doesn't change to idle. expected is when after the page is refreshed the status should change to idle ...
exotic-emerald
exotic-emerald3/21/2025

Navigateable drawer

Hi, New to tanstack router and file based router, currently only experimented with basic page navigations and a base layout.. My app is mainly built from table and drawer. when clicking a row in my table a drawer should open with more info about that clicked item. right now we manage that with state but this should be navigate-able so if I put a link with my item id the drawer should open niceley.....
fascinating-indigo
fascinating-indigo3/21/2025

useLoaderData => Invariant failed

Hi, I am trying get some data from a loader in layout component. That means the component might be rendered before that specific route with a loader is rendered which results in Invariant failed: Could not find an active match from .... This already points on where the issue is, but in my perspective this is a perfectly valid scenario, because if the route is not visited I expect the data to be undefined. As Tanstack Router is opinionated, my question is, what is the recommended approach for this particular case? I managed to work around this by combining useMatch with useLoaderData, but I don't like it as it feels dirty. So I'd like to know if there's a better approach, e.g. I am wondering why useLoaderData does not have shouldThrow option as useMatch does, because basically I can't handle the hook error in any way and as mentioned above I do expect the hook to fail in specific part of the route tree. ```ts...
flat-fuchsia
flat-fuchsia3/21/2025

Type helper - Route Ids limited by by a specific search param

We’re attempting to build some re-usable hooks for common uses cases like search. The idea to have a shared Zod schema so that all our list pages have a shared schema for search and then we were looking to create a shared hook. I found the example in the TanStack Table examples (https://tanstack.com/table/latest/docs/framework/react/examples/query-router-search-params) which has a hook that asks for a routeId to type match navigate and search params, but I’m wondering if anyone has any ideas o...
variable-lime
variable-lime3/20/2025

Opening Route

Hello! I might have a very specific question, but is it possible to after exporting the app (so you get the .html file) to immediately open a specific route. I wanna use this for Electron. (For example, you have a route called profile, you'd be able to open index.html#/profile). I tried some ways but can't seem to find anything that works.