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

stormy-gold

7/17/2024

Loader Navigation

Good day, was just wondering if there was a way to navigate inside the loader function of a route?

conscious-sapphire

7/16/2024

Global loading state

Hi, there is any approach to handle multiple if (isLoading) return <Loading message="Loading.." />? I have multiple components that loads and each time it fetch, it appears multiple loading messages. there is like a global approach to ?

wise-white

7/16/2024

What's the recommended order of operations when using data loading and state management?

For example, I'm using Redux, and I'm wondering if the loader should populate the initial state of the store with the results of async calls, or if it should simply trigger a bunch of thunks that make these async calls.

correct-apricot

7/16/2024

Tanstack Router Conditional Rendering

I have a routing setup with u/tanstack/react-router where I need to conditionally render components based on the active route. Specifically, I want the InstructorDashboardComponent to be rendered only when the route is /instructor-dashboard, and when the route is /instructor-dashboard/course-builder, the CourseBuilderComponent should be rendered instead. Currently, with the given code, the InstructorDashboardComponent is always rendered at the top of the file, even when the route is /instructor-dashboard/course-builder, resulting in both the InstructorDashboardComponent and CourseBuilderComponent being displayed. How can I conditionally render the InstructorDashboardComponent based on the active route to ensure it does not appear when the route is /instructor-dashboard/course-builder?...

flat-fuchsia

7/16/2024

Error when building app, Routes are not found

I am posting this again as it appears my original comment went unnoticed, but when built for production, all my routes are resolved with

404 not found

404 not found

on the page despite this not happening during development

deep-jade

7/15/2024

Nested routes with folders in file based routing

I'm using tanstack router for a current project. I've got an issue. Given the sample pseudo routing structure: ``` /_authenticated - folder + a separate layout /member - this needs to have a "layout" with 4 nested routes appearance.tsx...

overseas-lavender

7/15/2024

Naming convention for router

I haven't really looked into how this works exactly but I think it's catching up to me now and some files seem to need some changes in their name. The issue that I am facing is that the edit.tsx page and the $id.tsx page should both be children pages of the users.tsx page. Since that page controlls where they are headed towards when checking for a specific user in the table. Also it's starting to feel like I have missed something when I read the Route Tree & Nesting(https://tanstack.com/router/latest/docs/framework/react/guide/route-trees) guide on the website. To me it feels like a have created a mixture between both the flat routes choice and the directory choice and need some help changing this....

ambitious-aqua

7/15/2024

Support for nested dynamic routes?

Does this package support dynamically nested routes? Let's say I have an app which has 2 possible base URLs: - / - /base I want to be able to serve my app either from root or from /base. Can this work with tanstack router? I know dynamic routes are a thing, but if I were to use $base it would not catch the root route...

extended-salmon

7/14/2024

How to make a unit testing helper?

I'm trying to come up with a reusable unit testing helper that wraps components in the necessary RouteTree + QueryClientProvider. However I'm finding that hooks like useParams are not returning expected results, so I can tell I'm not getting it totally right. The issue seems to be that the params object is returning a key of ** instead of workflowId, although the value for the param is actually right. I've created a basic reproduction in StackBlitz @ https://stackblitz.com/edit/vitejs-vite-5wm5gn?file=src%2FWorkflows.spec.tsx. You can run the tests via npm run test in the terminal....

extended-salmon

7/13/2024

Base URL case sensitive

Problem: Base path set: /Test1/Analyze When a user doesn't use the correct case sensitive base path for instance this:...

rare-sapphire

7/13/2024

Redirecting when validateSearch fails

I'm trying to determine what the best practice is for the following, I've read through the docs and existing questions, and apologies if I've missed something obvious, but I can't seem to find an answer to this: I have a route component which requires an email address as a search param. I'm using a zod schema to validate this at the route level via validateSearch, so that the search params type will always be { email: string } (i.e. email is never null or an invalid email address). The schema is using strict validation with no default or fallback value, so an error will be thrown if it fails to parse. Ideally, I would like to redirect to a different page if the validation fails, without ever rendering the route component (so that if the route component does get rendered, it can be safely assumed that the search param is valid), but I'm unsure about the best way to achieve this....

modern-teal

7/12/2024

Layout for dynamic params

I'm trying to get a route layout to match two dynamics params pages, I'm trying creating a _layoute.tsx page inside the outer $id params but it doesn't seems working /search $id _layoute.tsx...

fascinating-indigo

7/12/2024

Need to refresh manually when using tailwind with rsbuild

"I am encountering an issue while using Tailwind with Rsbuild. Whenever I make changes to the code, I find myself needing to manually refresh the page for the modifications to take effect."ind with rsbuild, when i trying to make a change in code i need to refresh the page manually to make the changes happen

national-gold

7/11/2024

Infinite rerenders with preload of 'intent' on data table

Im trying to wrap my head around this problem. I'm noticing the preload of the link component is preventing the page from navigating and causing infinite rerenders on the data table cells. if i turn off pre loading it navigates. If i set a staletime on the query being passed it manually to the query, i still have this problem. Is useSuspenseQuery the problem here, always being called? i am sure this is a skill issue on my end ...

jolly-crimson

7/11/2024

List-Detail Layout with Path Params

I am struggling a bit with this conceptually. I think once I see the pattern, its going to help me out a lot. I am trying to make this a list detail view using a sub_layout (_layout). So the root layout is just an outlet that I can feed other page layouts into. Anyway, I want a sidebar nav that lists the pokemons and then the details page renders in the main element adjacent to the sidebar. How do I structure this accordingly? https://stackblitz.com/edit/tanstack-router-dyxcm6?file=src%2Froutes%2F__root.tsx...

deep-jade

7/10/2024

Undefined context with useRouteContext

Hi ! I have an issue with the useRouteContext hook coupled with validateSearch in a nested route that throw an error in a specific situation. In my application, there is an _auth route that ensure, in the beforeLoad method, that the user is logged in, returns his account's information if he is or redirects him to the login page if he's not....

protestant-coral

7/10/2024

Handle 404 from a component query

I am using '@tanstack/react-query' and '@tanstack/react-router'. I have a component that is a child in my __root.tsx that queries the api. When it works, it works, but I am having trouble in the context of this file based router to figure out what to do when it 404s. This one data fetch in turn runs the entire ui and every query afterwards, so the ui won't work if that one request fails. Ideally I'd like to just display an error component, or reroute to one in the

if (isError) {...}

if (isError) {...}

section of that component, but I don't know what would be proper protocol here. I had...

automatic-azure

7/10/2024

type inferred incorrect on getRouteApi or useSearch({ from: '/some/route/path' })

searchParams2 and searchParams3 both has a empty object type inferred unioned with the correct type. How to make sure the searchParams2/searchParams3 can get the correct typed object from search schema?...

harsh-harlequin

7/9/2024

Meta works on lazy routes despite TS screaming

Why does the Meta property work on the lazy route despite Typescript saying it doesn't exist? Are there any issues with using the Meta prop on the lazy route and ignoring the type error?...

modern-teal

7/9/2024

Two routes one page (optional parameter)

is there a way to have query like this whatever/ID/SECOND_ID where they both point to the same page but the SECOND_ID is optional? So even if you just put whatever/1 instead of whatever/1/2 it still match the same page

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