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

adverse-sapphire

5/20/2025

Navigating while refetch is in progress results in cache not being used

I was wondering if the behavior I am observing is a bug, or if I am doing something wrong. When defining a loader with long loading time I see the stale data as expected when navigating to the route from another route. The navigation also correctly triggers the refetch of the stale data. Now when I navigate to another route after triggering the refetch without waiting for the refetch to be done, and navigating back to the route immediately, I don't get the stale data, but instead have to wait for the loader to be done....

absent-sapphire

5/20/2025

How to detect previous route?

I can get to a route from 2 different route, and I want to be able to render the breadcrumb differently. So it would have 3 to 4 items in the breadcrumb depending how I get to that view. Thanks in advance!

noble-gold

5/20/2025

expose route context select

Hi! I'm working on a big component and for perf reasons, I don't want to pass all recursive data top down but rather only the top data and each component is responsible for getting the right data: ```tsx <Example> {ids.map(id => <ExampleGroup key={id} id={id} />)} </Example>...

harsh-harlequin

5/20/2025

Best Practices: Pagination / Filtering via Search Parame

Hello, I am working on a table search/filtering page - pagination: next, prev 1..2…….n-1…n...

eastern-cyan

5/20/2025

Custom serializer?

The docs mention you can set a custom serializer for ssr, however this api seems to have changed as there is no serializer key anymore. Is this still supported or is there another place this is defined now? on version 1.120.5...

sunny-green

5/19/2025

Set staleTime in the loader?

Is there a way to set the staleTime from inside the loader? Depending on the params/searchParams I'd like to set a different staleTime. Here's my use case, and I'm open to other ways of achieving it! - I have a basic search page...

xenial-black

5/19/2025

Navigation blocking but ignoring search parameter changes

I have a form that initializes based on a query parameter (type: string). Inside the form, the user may change the 'preset' type in case they initially chose the wrong one. To support copying the link and sharing it with others, I wish to then update the query parameters with the form as the source of truth. ...

conventional-tan

5/18/2025

Reading that route path is empty.

Have routing that is $ida/$idb . I need to persist an item in the $ida route, but this item needs to access the current idb value to determine weather to make this item invisible or not. Which I normally do through

const idb= useParams({from: '/$ida/$idb/'}).idb;

const idb= useParams({from: '/$ida/$idb/'}).idb;

However when I visit $ida page, it errors with Invariant failed: Could not find an active match from "/$ida/$ifb/"...

adverse-sapphire

5/17/2025

Separate layouts for dashboard and public routes

So im migrating from nextjs and in nextjs i can define layouts separately (routes) -> For public routes (This group has a layout which extends the root layout) dashboard -> For dashboardroutes (This route has a layout which extends the root layout) layout.tsx -> This is the root layout But with tanstack router file base router how can i do the same??...

fair-rose

5/16/2025

Hooks proposal

I have written 2 hooks that we've been finding pretty useful at work, I was wondering whether they might be of interest to the community. They're fully type-safe like native tanstack/router hooks (except for route masking because we don't use that, but that's seems doable if needed). The first is useNavigatePreload, it works like useNavigate, but in 2 steps, first to preload, then to actually navigate. ```tsx const preload = useNavigatePreload()...

fair-rose

5/16/2025

Hooks in shared component (useParams, useSearch)

Has anyone found a good solution for using type-safe hooks (useParams, useSearch) from components that could be mounted on multiple routes? I'm thinking of writing custom hooks that take an array of from instead of a single from string, but I'd love to know if someone has something better. The basic problem is something like this: ```tsx const Shared = () => {...

genetic-orange

5/16/2025

differentiate navigation due to router.navigate vs browser navigation

Is there any way to determine if searchParams change due to my own call of router.navigate vs the user/browser navigating with the forward/back buttons for example? context: im trying to have my app state represented in the url, and also allow the user to navigate between urls with different search params and load the state appropriately. ...

genetic-orange

5/16/2025

basepath issue

I am trying to deploy to github pages which introduces a mandatory repo name base path in the url. So to account for this i am setting basepath in in createRouter options and also base: in my vite.config.js. the issue im getting is that when i do this, i get a spam of errors, suggesting the app is trying to call react createRoot twice, and the entire app gets duplicated again below (as in, not rerendered twice, but i can actually see two of everything). If i remove the base path properties, then this issue stops happening. any idea how to fix?...

genetic-orange

5/15/2025

i know its not the right place

i start to research about tanstack/start and i'm wondering is there any way to set http only cookie with tanstack/start i can't see in the docs

ratty-blush

5/15/2025

Using url params for state w/ multiple components on a page

I follow the concept of using url for state in some cases where you refresh a page and want the same filters, sorting etc.. applied, it works great if it was a single table on a simple page. How does (or should it) this approach work on something like a Dashboard page, that may have multiple tables, lists, etc... Ending up with something like ?table1SortBy=...&table2SortBy=... feels weird to me. Thanks for any guidance....

ambitious-aqua

5/15/2025

Data Loading and Local Pagination

I have a route that fetch a dataset. I want to do local pagination. Is it possible to have child routes sharing parent query? this is base route...

national-gold

5/15/2025

Can I redirect AND update the router context within beforeLoad?

For context: My server has the following states: uninitialized & initialized In the beforeLoad of the __root.tsx I use TSQuery to get the serverState and inject it into the router context along with the QueryClient. ...

eastern-cyan

5/14/2025

Search Params typings not working as expected

I've read the documentation half a dozen times today already, but clearly something is wrong with my understanding. Why the search params for the ReportRoute are not being inferred as expected? It all works, but if try to use, for example:

const search = ReportRoute.useSearch();

const search = ReportRoute.useSearch();

within a given component, search is typed as any. The route tree is as below:...

unwilling-turquoise

5/14/2025

Search params on index.route with '/'

I'm using search params on the index page. '/' is added to the end of the URL. Can this behavior be changed? I want it not to be added. Here's my example: https://stackblitz.com/edit/tanstack-router-famkfjkq?file=src%2Froutes%2Findex.tsx Current behavior: https://[your-stackblitz-url]/?count=0 Expected behavior: https://[your-stackblitz-url]?count=0...

fascinating-indigo

5/14/2025

TSR imports not working as expected

I am trying to integrate TS Router into an electron app, and importing certain functions are giving me weird errors about not expecting args when the docs say clearly that, for instance, createLink accepts an arg for a component. What am I doing wrong here?...

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