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

genetic-orange

2/26/2025

Beginner: wrong beforeload being trigger ?

Hey guys, so I have a file tree as follow: ```txt |-(teams) | |-teams.tsx...

metropolitan-bronze

2/26/2025

Incorrect routetree.gen.ts structure

Hi all, this is how i've structured my files, i'm expecting that anything beyond /dashboard/* will inherit a navigation that i've created however this is not the case, in routetree.gen it shows that the base / is the parent of these routes why is that? I have an outlet at /index.ts and /dashboard/index.ts

sunny-green

2/26/2025

implement supabase auth into router context

i want to implement the supabase auth into my router context, but when i try to call the context auth in beforeLoad layout, it's not updated as in my AuthProvider component. when i change the code in AuthProvider, it will infinite loop. I've try this repo to implement in my code, but it's still not show the context auth in beforeLoad layout. can you guys know what's the problem??

flat-fuchsia

2/26/2025

Set default child route

Hello, I already have a solution working for this, but I'm just checking to see if there's a better way to do what I'm trying to do here, or if I shouldn't be trying to do this at all and I should be using a different structure. Lets say for an example my site has pages for "groups", with subpages to view a group's members and to view posts made within the group. There is no page for just the group itself, only these views of either the members or posts, and one must always be selected. To model this via the router, I have a parent route group.$id and the child routes group.$id.$members and group.$id.posts. When a user navigates to just https://example.com/group/123 in their browser, I have it set up to automatically redirect them to a "default" child route, such as https://example.com/group/123/posts. To do this, I check in group.$id's beforeLoad function for if it is the "leaf" of the URL, as in the current route is none of its children, since the beforeLoad also runs for all of the child routes. If it is the current leaf route, I throw redirect({ to: "/group/$id/posts", params }) to redirect the user automatically. I wrote a custom function to detect if the current route is the left or not as shown below: ```ts...

xenial-black

2/25/2025

Match route on search params?

I'd like to render either of two components depending on if a search parameter is present. For example: - /books should render component <BookList /> ```createRoute({...

equal-jade

2/25/2025

npm create @tanstack/router VS create-tsrouter-app

Could anyone highlight what are the differences between the two? The first one is from the docs: https://tanstack.com/router/v1/docs/framework/react/quick-start, the other one is the proclaimed successor 😉 to create-react-app. Both use tanstack router underneath, hence the confision. Is it anything more than just a rename/rebrand? TIA...

foreign-sapphire

2/25/2025

Run examples using pnpm

I use fnm with corepack enabled. And when I tried to run examples with pnpm it showed to me that signature does not match etc. But with npm it worked. So is it possible to run examples with pnpm?

ambitious-aqua

2/25/2025

Is it a bad practice to call `useQuery` in route components?

I wonder why we need loader in the first place. Can we just call useQuery and call it a day?...

stormy-gold

2/25/2025

Typescript Error with LinkComponent.. Best Practice?

Currently i am struggeling with the Link Component Type safety. I have 3 routes that are using the same component for searching users on my plattform. ...

foreign-sapphire

2/24/2025

Navigating to link shows previous page while fetching new page.

I use tanstack router with file based routing and auto code splitting. When i navigate to a new page using a tanstack Link then for some time i still see the content of my current page even though url bar is updated to new page url. I see current page until data for that new route page is fetched. Is that a bug and why is that happening? How can i change it to see loading pending component instead current page while loading js for my new page?...

mute-gold

2/24/2025

Micrsoft Authentication library not working properly for hashed route with tanstack router

I have an implementation of the tanstack router with _auth.tsx file and _authenticated.tsx file for the protected route and their code is same with condition change as shown: ```import { createFileRoute, redirect } from "@tanstack/react-router"; export const Route = createFileRoute("/_authenticated")({ beforeLoad: async ({ context, location }) => { if (!context.auth.getActiveAccount()) { // Here this is the condition change for the auth file....

equal-jade

2/22/2025

flaky e2e tests?

question: is it only my - or the e2e tests are flaky? Here I've got 2 test runs: - https://cloud.nx.app/runs/C77Xm9I0P5 (2 suites fail) - https://cloud.nx.app/runs/ZXbYPUgPAK (1 suite fail) but there was literally no code change......

conscious-sapphire

2/22/2025

Monorepo-examples and HMR

I'm new to monorepos and tried the router-monorepo-react-query-example. Is it possible to get HMR when changing the components in post-feature-package?...

evident-indigo

2/21/2025

What happens here during code splitting?

I was showing my friends some of my code with Tanstack Start but did not know how to properly answer the following question. Take a look at this snippet ```const addSessionHistoryEntryFn = useMutation({...

correct-apricot

2/21/2025

Lookup dynamic route's metadata with route name?

Is there any way to take a dynamic route and lookup/retrieve associated metadata from the router?

correct-apricot

2/21/2025

Directory route.tsx that hides when visiting child route?

I'm attempting to do a mixed directory and flat structure but I can't see a clear way to have a route.tsx file (being the directory path) and having the ability to make non-nested routes. For example I would like route.tsx to be visible in the background of my /invite routes which render a modal but I would like the route.tsx to not be rendered when visiting /$userId. No matter what I do it seems route.tsx will render and if I change it to index.tsx then I don't get the content in the background...

fair-rose

2/21/2025

Refreshing page gives error

When I navigate to some route by clicking the navigation bar, say to /some/route and then refresh the page, the page shows Cannot read properties of undefined (reading 'href') error. Could anyone please help? I'm in dev mode right now. TS router version 1.109.2 , vite version 6.0.5...

eastern-cyan

2/20/2025

Nested layout for routes

Hey, everybody! I am trying to create the following authentication route structure and I need to add a generic layout that wraps the sign-in and sign-up routes. I have created a pathless route _layout.tsx, but it doesn't seem to work. I've read several threads about this, but haven't figured out how to properly define this layout. I'd be glad if anyone can help. Thanks!...

jolly-crimson

2/20/2025

Programatically updating a searchParam

How can I programatically update a searchParam so that it re-runs the useSearch hook to update the value in the component? const { fooBarId } = useSearch({ from: '/foor/$barId/_layout' });...

optimistic-gold

2/19/2025

Cookie based auth review.

Hi all! I just wanted to confirm if my "solution" works fines, break no rules etc. as it's really important for me. I don't want to make mistake that will cost me a lot in the future. If anyone like, please tell me if my approach is legit, alternatively leave your suggestions please! I'll be grateful. main.tsx: ```tsx const queryClient = new QueryClient();...

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