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

sensitive-blue

9/12/2025

Release flow details

Hey guys, 🙂 I noticed that version v1.132.0 of TanStack Router is currently released with the alpha postfix. This version contains some changes I’m really looking forward to using in our enterprise application. Do you have any plans or timeline for when this version might get a stable release (without the alpha tag)?...

harsh-harlequin

9/11/2025

Context not typed

Hi everyone. My context appear as not typed. This is my code: ...

plain-purple

9/11/2025

Posthog and tanstack router

Trying to setup posthog without auto capture in our tanstack start with router app. I got the identificstion of users working, but I cannot find a clean way to capture $pageview events. Does tanstack route have some kind of before/after route change event one can listen to? Or has someone found a better integration to make this work?

genetic-orange

9/10/2025

Different "from" values between useNavigate and useSearch

Hey, wondering why useNavigate works with from: '/route-a', but useSearch needs from: '/_pathlessLayout/_nested-layout/route-a'? ```tsx const navigate = useNavigate({ from: '/route-a' ...

extended-salmon

9/9/2025

Input loses focus on first render when using navigate

Hey everyone! I have an input that sets a query parameter in the URL using useNavigate, this works pretty good, however there is one use case where the input loses focus when the page is rendered for the first time and the user types one character. Is there a way to avoid this problem? This is what I am doing: ``` <TextFilter...

xenial-black

9/9/2025

metadata template

Is it possible to have templates in metadata? Can really find any information about it. In root: ``` meta: [...

ratty-blush

9/8/2025

Edit body class

Hello, how can I edit the class names of the body? I am using Tauri to make an application with tan stack router and whenever I specifically denote the html and body tags in the root router layout. Everything breaks if clicking on an input.

rising-crimson

9/8/2025

Using zod `.default` in `validateSearch` causes the route to error out and parents to miss context

I've been able to narrow down some errors I've been seeing in my Tanstack Router app. When using .default in my zod search params schema inside validateSearch, the page will error out. The cause of this error is a parent high up the tree having mismatched context, which I think is a hydration error similar to what is being described in a related issue here. Notably, this only happens on one top level tree in my app. For example, site.com/admin/* works fine, but using validateSearch anywhere in site.com/user/* breaks. /user will be missing the context from the beforeLoad in its context, and console logging it shows only the context from the _root.tsx component....

deep-jade

9/7/2025

Custom Search Param Serialization

Hi, I’m running into an issue with search param serialization in TanStack Router. When I pass arrays into search, the URL looks like this:

https://example.com/route?country=%5B%22DNK%22%2C%22FIN%22%5D

https://example.com/route?country=%5B%22DNK%22%2C%22FIN%22%5D

That’s the array JSON-encoded into a single query param value. What I’d like instead is the more standard repeated-keys format:

https://example.com/route?country=DNK&country=FIN&page=2

https://example.com/route?country=DNK&country=FIN&page=2

I tried following the docs with query-string:...

complex-teal

9/6/2025

React-aria-components & createLink

heya, I'm working with RAC and tanstack router, and have moved away from RAC's RouterProvider pattern to createLink, but a few things have come up. ListBoxItem can potentially be a link, but not always, if passed a href prop it renders an 'a' tag, otherwise its a div....

stormy-gold

9/5/2025

Recommendations for Zod validated Nested Search Params

I've reviewed the docs on Search Params + Zod several times and haven't really found a nice way to deal with typing a nested object in my URL state. I made this minimal example (see the /about route) that shows off some of the tricky pieces I can't seem to work around: 1. any params that use the fallback() function from @tanstack/zod-adapter force their key into the URL (which is just preference, but clutters up the URL bar)...

robust-apricot

9/5/2025

Match active tab with router

``` const tabHeaders = [ { value: 'expenses', title: 'Expenses' }, { value: 'timesheet', title: 'Timesheet' }, ];...

genetic-orange

9/4/2025

Different code splitting behavior when using `autoCodeSplitting: true` vs splitting with .lazy.tsx

I was looking at my bundle and noticed that a dependency that is used in a route was included in the main bundle. I have autoCodeSplitting: true so I would expect it to be split into a separate route, but unless I manually split the route using .lazy.tsx, it gets included in the main bundle when built. Am I misunderstanding how auto codesplitting is supposed to work?

extended-salmon

9/4/2025

Leaflet integration issue

Hi there, I'm trying to use leaft & react-leaflet and struggling on the SSR behavior. I tried to wrap the map with the ClientOnly component but it does not work. Is this because the library is still loaded/evaluated during the SSR ? Next.js use the dynamic import system but is there an equivalent for the router ? ...

plain-purple

9/4/2025

Search params with zod

I have read the search params guide many times now and I think I'm misunderstanding something. Our scenario is that we have let's say 2 routes (bookings list and booking details) that have the functionality to cancel the booking. When a user clicks such link or button, we add a search param in the url to handle the open state of the modal like confirmation sheet (that includes some other cancel related functionalities), we do the same for the unassigning the worker from the booking use case. Again both routes have this button and link and add a search param to show the modal like side sheet to handle and confirm the unassignment details and to confirm the action. Where I get really confused is how to set this up in a typescript loving manner with validateSearch using zod. Do I add for both sheets the params required to use the sheet? And make them both optional? Or the whole schema is partial? And how to handle the useSearch part as it would require a from param but which route?...

afraid-scarlet

9/4/2025

Get the type of the search from a specific route ?

Hi, Is there a way to infer the search type from a specific route ? To have like :...

conscious-sapphire

9/3/2025

Optional path params not working

Always redirect to not found page

continuing-cyan

9/2/2025

Can I check if a route exactly matches the current location inside a loader function ?

Hey, I feel I might be going against the intended flow of TanStack Router here, but here I go anyway: My route structure goes like this: /app/channel/${channelId}/show/${showId}/some_page...

harsh-harlequin

9/2/2025

Does the loader guarantee that its internal function completes before the component is rendered?

In my app, I have logic that needs to perform a health check from the server when accessing a specific route, and then redirect based on the result. If I handle this branching inside the loader, I’m not sure if I can guarantee that the health check response will be completed. Would it be more appropriate to use beforeLoad instead?...

correct-apricot

9/1/2025

custom metadata field on createFileRoute

hello tanstack, I'm working on a project where I'd like to generate clickable previews for different pages based on metadata from the file system routing. essentially, i'd like to have an app name, an icon, and perhaps a description for use in a launcher for internal apps at work. Is there a way to define this inside the createFileRoute? By using the head property, i can add certain metadata and introspect it at build time by reading the generated routeTree object, but this will end up inserting it into my html. Is there a better place to define build time metadata associated with a route? Or a way to extend my router to enable this in a type safe way? I've attached 2 screenshots of how i'm reading / writing to the head property currently...

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