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

fair-rose

4/16/2025

How to props typesafety for a LinkCard component?

Basically I want my <LinkCard> component to error the same way <Link> from @tanstack/router if you fail to give it a to="" prop ```ts function LinkCard({ className, ...props }: LinkComponentProps) { return ( <Link...

jolly-crimson

4/16/2025

Navigating: Router Context always Undefined in beforeLoad

Hey all. I'm wondering what I misunderstood with router-context. What escapes me is that I have a _app folder which is my wrapper and in beforeLoad I check the context for an user object and I fetch it if not present in the context. But when I navigate between the pages the context is always undefined and the user info get's fetched every time....

optimistic-gold

4/16/2025

Input box dynamically changing search params with out losing focus

My current implementation is causing a re-render of my input box on each key I type into the input box causing me to lose focus on that input box. Is there a pattern I can use to keep focus but still update my search params as I type.

optimistic-gold

4/15/2025

Handling of failed search params against zod schema

I am looking for a good pattern to handle errors associated with incorrect search params not matching up with zod schema. Does tanstack provide a way of handling these search params. Like fixing or stripping out them if they fail against the schema?

stormy-gold

4/14/2025

Type Errors when using navigate from useNavigate

Hi, I am getting type errors on my search params when I pass them to the navigate function created by useNavigate. I have put together a very basic example to replicate the issue I am facing: ``` import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { zodValidator } from "@tanstack/zod-adapter";...

sunny-green

4/14/2025

Different SSR options

Hello! I noticed that there are two different ways of doing SSR, the documentation in https://tanstack.com/router/latest/docs/framework/react/examples/basic-ssr-file-based and full tanstack start, but both examples actually use TSS. My question is, wich approach is best or recomended? im just interested in regular server side rendering (not streaming) nor server functions or the other functionality in TSS...

ratty-blush

4/14/2025

Invalidating query/route after mutation

Hello! I am using TS router with TS query in a Vite SPA application. I have a page that lists all events like so: ```typescript...

other-emerald

4/14/2025

Code splitting with Virtual File Routes

Does code splitting work with Virtual File Routes? I've tried setting autoCodeSplitting and renaming the route to use a .lazy.tsx suffix. When I try to use createLazyFileRoute the vite plugin renames it to createFileRoute.

jolly-crimson

4/14/2025

Update Router Context key/value

Hi all. I was wondering if I'm missing the docs or if it's possible to reset one key/value pair in the router context when I do a mutation of data? Basically I want to update the context from the component triggering the mutation....

fascinating-indigo

4/13/2025

Failed to fetch route id on fast-refresh with vite

The error occurs when i make changes to the inventroy-list route leading to poor DX that requires manual page reaload or browser refresh.

solid-orange

4/13/2025

need access to response of endpoint before any route

The structure of my app is - ``` <QueryClientProvider client={queryClient}> <RouterProvider router={router} />...

multiple-amethyst

4/12/2025

How to match location with fullpath in beforeLoad method

Here https://stackblitz.com/edit/tanstack-router-wryvvkja?file=src%2Froutes%2F_appLayout.tsx I am currently in a situation where i need to match a pathname (i.e "/patients/agnes_smithson-132/diagnostic-history") with "/patients/$patient_slug/diagnostic-history". Please all these are dynamic as it is in the above code. Using router.routeByPath, i get all routes object, is it possible to use location to match the current route from the routes object....

correct-apricot

4/12/2025

How to do a correct redirect using queryOptions when the api returns an error i.e 404

On first image i try to catch the error 404 and redirect but I it will do an infinite loop. Then i try to remove that approach and instead check the user on the _dashboard loader and throw a redirect when user is null. The problem with 2nd approach is it doesn't trigger it. The error from the response will be triggered first (3rd image attached:tanner:)

sunny-green

4/12/2025

Best practice for layout

Trying to figure out best practice for a layout like this. I want sidebar section 1 to have its own loader/pending component. Should I just use useQuery in sidebar section 1 or is there a way to position the layout routes to give section 1 its own route/loader

optimistic-gold

4/10/2025

Async data for search params

We have a from date as a search param but this from date we fetch from the database. What should my zod default be for this? Should I even be introducing async code at this point or be handling it later down in the component say (default is "" and if component sees "" then fetch info from database?) any suggestions would be great thanks in advance 🙏 TDLR: How can we add async values in default value in zod schemas when creating search params....

fascinating-indigo

4/10/2025

Route head function not called if rendering notFoundComponent

Hello, we have an issue open here and would like some help with implementing this functionality so we can display dynamic head tags when a route loader or beforeLoad function throws an error. May you please help us? Thank you.

solid-orange

4/10/2025

Is there a lifecycle hook that runs before validateSearch?

Two scenarios: 1. Page with required params, but the params can only be validated asynchronously, or have asynchronous fallback values. Right now we're abusing the layout route (or root in this case specifically) to do the search sanitation in beforeLoad, so the route can run its validateSearch on proper values. It feels very dirty and constraining. 2. Page with a guard based on search params. Do not allow entering page A without certain params set, if they are missing - redirect to page B. Since validateSearch cannot throw redirect AND it also runs before beforeLoad, we have to do the same layout (or root) shenanigans....

stormy-gold

4/10/2025

Should i wrap theme or use createRootWithContext

I'm currently using create rootRouteWithContext for the query client for Tanstack query but for the theme provider should I use should I wrap it or can I also add it as context.

stormy-gold

4/9/2025

Using route groups?

Is using route groups like this () discouraged? Does it do anything? Like (app) or (auth) where i use route.tsx for the layout of each. Also is route.tsx keyword file?...

harsh-harlequin

4/8/2025

Is there a way to update a search param without triggering navigation hooks like beforeLoad?

I tried to use window.history.replaceState({}, "", newUrl); but even that causes the beforeLoad of routes to run.

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