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

exotic-emerald

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

rival-black

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....

plain-purple

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.

rival-black

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....

correct-apricot

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.

correct-apricot

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?...

vicious-gold

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.

harsh-harlequin

4/8/2025

Precautions I should have when using Router + Query?

Hi everyone, I have a project that uses TanStack Query and React Router, with all my network calls going through Query. I'm currently migrating to TanStack Router and following the documentation. During this process, I came across createRootRouteWithContext as opposed to createRootRoute, but I'm not sure about the differences or when I should use one versus the other....

sunny-green

4/8/2025

Any example of using shadcn ui tabs with tanstack router

Any guidelines how to display the active tab on the url.With Assumptions tabs are not separate routes.So the url will be in this format /home?tab=Overview or /home?tab=Settings

noble-gold

4/8/2025

Layout component in route vs using a layout route performance

Does having a layout route make it more performant to move from one page to the other compared to just having the two routes and inside each the content is wrapped by a Layout component? I'd guess there isn't much of a difference since Tanstack Start does client side routing but maybe I'm missing something....

ratty-blush

4/8/2025

[vite] (ssr) Error when evaluating SSR module $vinxi/handler/ssr:

``` [vite] (ssr) Error when evaluating SSR module $vinxi/handler/ssr: Cannot read properties of undefined (reading 'update') at eval (/home/tony/Code/start-basic/src/routeTree.gen.ts:65:62) at async ESModulesEvaluator.runInlinedModule (file:///home/tony/Code/start-basic/node_modules/vite/dist/node/module-runner.js:1049:5) at async SSRCompatModuleRunner.directRequest (file:///home/tony/Code/start-basic/node_modules/vite/dist/node/module-runner.js:1271:61)...

metropolitan-bronze

4/8/2025

slug pattern for tsr that doesn't involve multiple rounds of encoding/decoding?

i tried explaining the various patterns i've attempted for this, and this message just got unnecessarily long, so rough overview is - i'm encoding/decoding my title value at the route level with param parse and stringify. this makes life really easy as i can just route using my title, and it will become a slug for free - because i'm doing this, i lose casing in the process. this means that when i look up the record by title in the route, i'm looking up with a fake title that has lost the true casing i have a solution now where i look up by slug instead, and this works (but now if i need this param to be used as a title anywhere else that i can't access the data from db, the decoded title may not be cased properly). Just wondering if anyone has general guidance, i don't really love any of the solutions i've come up with...

conscious-sapphire

4/7/2025

Resetting search parameters when leaving a location / route?

I'm using search parameters for pagination vales like page and offset. When navigating away from a route with a table that uses these, to a different route that also has a table that uses page and offset, I want those values to be reset. Is there some way to solve this in the route setup (ie with onLeave), or do I have to do what I do now, setting these search paramaters to 0 on every mavigate/link in the page?

national-gold

4/7/2025

TS error "unsafe assignment of type any" using `Route.useParams()`

```export const Route = createFileRoute('/_user/learn/$lang/$id')({ component: RouteComponent, }) function RouteComponent() {...

fair-rose

4/7/2025

Help regarding directory based routing

I have this weird case where I need two layouts for protected and public routes public -> /login|forget-password (those share a layout) protected -> /dashboard|users (those share a layout) ...

ratty-blush

4/5/2025

Grabbing window.location.origin in ssr best ways?

this might be a dumb question but my page is using ssr to render but i need to pass window.location.origin but that wouldn't work from the server, right? any workarounds people might know? Or does it make sense to just store my website's url in an env var? ```ts export const Route = createFileRoute("/_auth/$pathname")({...

blank-aquamarine

4/4/2025

Link & startTransition

Hello everyone ! I am currently facing an issue with the usage of suspense in Tanstack Start. This is my setup :...

ratty-blush

4/4/2025

beforeLoad -> loader question

Hi all. I've been enjoying the Router but I have a quick question. In beforeLoad I make a check if context has a key value pair and I fetch the data and store it to the context....

deep-jade

4/3/2025

Loader called twice on the server, cause = "enter" and "stay"

Is it intended that the loader is called twice for a very minimal setup? Queries are deduplicated using tanstack query in my setup, but for instance I have a server function outside tanstack query that is being called twice. The loader is called twice on the server with cause = "enter" first and then "stay"?...

typical-coral

4/3/2025

Doc example improvement

Hey, I was looking at some tanstack router examples and was wondering if const [filterDraft, setFilterDraft] = React.useState(filterBy ?? '') was a bad practice, why do we duplicate the url state into a useState in this case ? https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-file-based?path=examples%2Freact%2Fkitchen-sink-file-based%2Fsrc%2Froutes%2Fdashboard.users.route.tsx Can't we do something like this instead:...

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