TanStack

T

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

eastern-cyan
eastern-cyan2/28/2025

is it possible to wildcat in Route Masking?

I want to create a masking that works for all routes. i have a global dialog that is based on query params and i don't want this query to always reflect in the url, how can i implement this? i.e ...
sunny-green
sunny-green2/28/2025

Layout Pathless Route seems to not work

Hello, when i'm going to /user/profile by example /_app.tsx is not rendered. It is normal ?...
No description
foreign-sapphire
foreign-sapphire2/28/2025

How to change header/footer when using defaultNotFoundComponent

hello there. I have a question about developing 404 page. There is a defaultNotFoundComponent in router.tsx as attached image. So, I created 404 page component and added to it....
No description
afraid-scarlet
afraid-scarlet2/27/2025

Trying to identify source of error: TypeError: globalThis.app.config is undefined

I'm copying the ThemeToggle functionality from tanstack.com. I used the newly launched https://github.com/TanStack/create-tsrouter-app CLI, copied over the ThemeToggle component from https://github.com/TanStack/tanstack.com/blob/main/app/components/ThemeToggle.tsx and resolved any dependencies issue. The error is being thrown by https://github.com/mauricioschneider/mau.xyz/blob/main/app/components/public/ThemeToggle.tsx#L20. This happens when I click my toggle. I'm running vite. Was trying to use vinxi, in case it was something related to that, but haven't tried yet. ...
extended-salmon
extended-salmon2/27/2025

Provide a different basepath for a set of subcomponents

Hello, I need to use a different basepath for some subcomponents so their inner <Link> always starts with that basepath. I first thought I could use a RouterContextProvider as this ```jsx const ForSubComponent = () => {...
sunny-green
sunny-green2/27/2025

Impossible to have Index route working

Hi, When i use tanstack start, i try to map an index route ('/') but it is not working can someone can help me ? /app/routes/index.tsx ``` import { createFileRoute } from '@tanstack/react-router'...
No description
round-purple
round-purple2/26/2025

How to Handle notFound() Globally Instead of Checking 404 in Each Loader?

Instead of checking for a 404 status and throwing the notFound() function in each loader separately, can I handle it in one place? For example, in the onError handler of React Query’s QueryCache or in an Axios response interceptor? I’m trying to implement this as shown in the screenshots, but I’m still encountering an error, as you can see in the screenshots....
No description
stormy-gold
stormy-gold2/26/2025

Beginner: wrong beforeload being trigger ?

Hey guys, so I have a file tree as follow: ```txt |-(teams) | |-teams.tsx...
metropolitan-bronze
metropolitan-bronze2/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
No description
xenial-black
xenial-black2/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??
correct-apricot
correct-apricot2/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...
fair-rose
fair-rose2/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({...
metropolitan-bronze
metropolitan-bronze2/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...
absent-sapphire
absent-sapphire2/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?
flat-fuchsia
flat-fuchsia2/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?...
extended-salmon
extended-salmon2/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. ...
absent-sapphire
absent-sapphire2/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?...
eastern-cyan
eastern-cyan2/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....
metropolitan-bronze
metropolitan-bronze2/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......
xenial-black
xenial-black2/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?...