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

fascinating-indigo

7/3/2025

How do I get context set in root route?

```js interface RouterContext { player?: ReturnType<typeof usePlayer> } ...

deep-jade

7/3/2025

Breadcrumbs with async loaders in between

I have a following folder structure: ``` routes/ $lang/ _layout/...

national-gold

7/3/2025

Which type provides me all registered TanStack Router routes in my project?

I have created a component that should receive a valid TanStack Router route from my project as a property. Which type provides me with all the available routes so that the property is type-safe? Example: ```ts // Should error if route does not exist. ...

harsh-harlequin

7/2/2025

Tons of "any" types.

Not even sure how to ask this question. I'm a web dev with ~1 year of experience trying to set up a monorepo and I'm not getting any type data out of the @tanstack/react-router package. I've basically copied the Monorepo with React Query https://tanstack.com/router/latest/docs/framework/react/examples/router-monorepo-react-query example verbatim. My vite.config.ts, tsconfig, package.json, src/* directory, it's all completely identical. For some reason, though, nothing coming out of the @tanstack/react-router package is correctly typed. It's all "any". The import is referencing the correct node module, and other packages are all correctly typed (the QueryClient import works fine, but that comes from the react query package)....

metropolitan-bronze

7/1/2025

Custom comparison method for loaderDeps

Hello, I'm trying to use a search param which serializes to bigint but I have troubles with loaderDeps: https://stackblitz.com/edit/tanstack-router-pajud2x2?file=src%2Froutes%2F__root.tsx&preset=node (click on About in nav)

Do not know how to serialize a BigInt

I see that the error is coming from the loaderDeps implementation which tries to JSON.stringify the search object. Is there a way to customize this behavior?...

cloudy-cyan

6/30/2025

Redirect to same route

When I try to redirect to the same route with a new search object it doesn't keep the search parameter from the redirect. I have tried with my mask and without it. ```ts beforeLoad: async ({ search }) => { console.log({ beforeLoad: search });...

rare-sapphire

6/27/2025

How do I debug route tree generation errors?

I'm getting this route generation error whenever I tried to save a new route file:

Error: expected identifier to be present
    at file:///home/user/project-name/node_modules/@tanstack/router-generator/dist/esm/generator.js:152:19

Error: expected identifier to be present
    at file:///home/user/project-name/node_modules/@tanstack/router-generator/dist/esm/generator.js:152:19

...

adverse-sapphire

6/27/2025

Storing state in search params

Hi everyone. I have a non-controlled search input with a default value from useSearch(). The input has a debounced onChange handler that takes the final value and pushes it to the search params using useNavigate(). My issue is, the entire layout rerenders when I update the search params and the input loses focus which is not a good experience. The alternative would be to add a submit button and let the user click that when they are done typing but I'd like to know if there's a way avoid that.
Also, I noticed that on wrapping the navigate() in a startTransition, 'isTransitioning' is never true. The navigation just happens silently and my loading spinner inside the search input never triggers....

xenophobic-harlequin

6/27/2025

Could not find match for from: /pardavejai/$publicFreelancerProfileName/ or basically any link

Hey, I recently migrated to tanstack-router, I use Vite file based routing with React and have a general setup like in the image. The problem is that any Link I click - via useNavigate or Link component I get dozens of these console warnings for any click I make, even though I seem to have everything set up correctly, the Link's to props are type-checked, I pass in the params and I use the auto-generated from file names paths. I get redirected to the route - just with a lot of warnings. What could possibly be causing this? How could I fix this?...

equal-aqua

6/26/2025

retainSearchParams

How does retainSearchParams actually work? When i have routes /tasks and /tasks/$taskId If i go from /tasks to /tasks/123 u want to retain search params, but it actually doesn't. how come?...

conscious-sapphire

6/26/2025

Problem with navigating to same route

After updating the @tanstack/react-routerfrom version 1.120.13 to version 1.121.34 I have a problem when trying to navigate using to: '.' option in navigate from useNavigate (for Link component works the same). From what I've been able to determine, the router tries to redirect to basepath after calling navigate with to : '.'. I found that this issue was related to that but it doesnt resolve my problem https://github.com/TanStack/router/pull/4472. I prepare some demo to show the problem. To reproduce the issue go to Map and click on button open panel it than redirect you to the index route. https://codesandbox.io/p/sandbox/tanstack-router-bug-example-j4qlpj...

fascinating-indigo

6/25/2025

(SOLVED) How to make a custom link with an active className

I've got this component, and I get the following type error when trying to add active props. It's a massive error, looks like AI describes it as a complex union type that I'm not narrowing. This is a modified example from the docs, what's the right way to do this? ```tsx...

rising-crimson

6/25/2025

Dynamic Route + Static Match

What would be the best practice to use dynamic routing but also have specific logic for a specific route? For instance, /$branch/$step maintains top level logic and layout, but I want to do something special if route is /foo/*? I was hoping to separate the logic from the /$branch/$step file. I have tried /_foo route but get an invariant error at runtime. Ref. https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#pathless-layout-routes...

other-emerald

6/25/2025

Unable to navigate within a useEffect

I'm in a useEffect and calling navigate() , but nothing happens. I've tried calling navigate() via useNavigate() and redirect(). The strange thing is that when I save a file to kick HMR, then the navigation kicks in. I am navigating from '/xx/onboarding' to '/x', one level back, in case that has something to do with it. ...

generous-apricot

6/23/2025

keepPreviousData with useSuspenseQuery

Hello, I'm using router with query and was wondering if this pattern can be done in a better way: I want to have data available right away on the inital load so I don't need to implement loading screens, but on client navigation I just want to use previous data until the new one is fetched. when using useSuspenseQuery + awaiting ensureQueryData in loader it works that way but since my UI depends on search params when changing route I still see previous params until loader finishes fetching the data. In my case im using a select component like this:...

sensitive-blue

6/23/2025

set route state from loader funtion

Hey is it possible to set router state from loader function in createFileRoute? something like that: ```js...

correct-apricot

6/23/2025

Implementing .well-known route (escaping .)

I need to setup associated domains, apple aasa file and this should be served at .well-known/apple-app-site-association. Is there any way for me to include a "." (a dot) in the routing?

initial-rose

6/22/2025

Tearing my hair out... route groups misunderstanding? );

I've read and re-read the docs as well as cloned and looked through the nv-rental-clone demo app from @Sean Cassiere but I can't figure out why my routes with route groups won't render properly.

For context, simple routing stuff was working, but we want to use slugs for some things so I overhauled the structure some to try and use more best practices.

The screenshot shows my current layout....

deep-jade

6/22/2025

Netlify dev fails when including a spa redirect

My project is a tanstack router react app with vite. In the netlify docs it mentions spa apps require a redirect from /* to index here adding this redirect isnt an issue until you do a local build either with pnpm build, or using the Netlify cli with

netlify build

netlify build

. after building the project the

netlify dev

netlify dev

command crashes the server immediately and the only way to fix it is to dele...

relaxed-coral

6/20/2025

Would there be interest for adding `sherif` to the tanstack/router monorepo?

It's a high quality, fast tool for ensuring consistency across all the dependencies of a monorepo. https://github.com/QuiiBz/sherif It's as simple as pnpx sherif. No config, no install, doesn't even need node_modules....

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