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

vicious-gold
vicious-gold4/23/2025

Is it possible to render the notFoundComponent inside of my auth only layout?

Please take a look at this adjusted kitchen sink example: https://stackblitz.com/edit/tanstack-router-mg97mijn?file=src%2Froutes%2F__root.tsx My app has a setup like this: - _auth folder for routes only visible after login which has the navbar in the layoutless route - _login folder for routes only visible before login which has the login page layout in the layoutless route ...
harsh-harlequin
harsh-harlequin4/23/2025

vinxi dev & tsr generate different `routeTree.gen.ts`

During CI we use tsr generate to generate the routeTree.gen.ts but it seems like this produces a different routeTree, even if we provide a tsr.config.json. Is there a way to trigger tsr so it provides the same options that the vite plugin does?...
sunny-green
sunny-green4/23/2025

TanStack Router node_modules error

Hi everyone, I've just migrated to TanStack Router from React Router and whilst the bulk of the migration went fine I'm having a weird issue with TanStack and typescript. When running typescript check on my project, it picks up a load of issues in tans stack routers .d.ts files. (See attached files) I don't have issues with any other packages so I can't understand how it would be my set up though obviously I can't rule it out....
No description
rare-sapphire
rare-sapphire4/22/2025

Index and auth index routes

Is there a way to have an unauthenticated route / where there is a button to login and once the user is logged in we are still on the / route but it actually loads the /_auth route?
adverse-sapphire
adverse-sapphire4/22/2025

How should I handle layout for login page?

I currently have some universal layouts (nav menu, user profile, etc) inside the root component. These layouts should not be visible unless the user is authenticated. However, a login page will be a descendant of the root component, which will include these layouts. I know I can manually check for authentication inside of root before displaying layouts, but is there another way for only the login page to ignore these layouts?...
like-gold
like-gold4/22/2025

validateSearch resets router context

Hi, currently I'm trying to use the validateSearch to get search params inside my loader. ```...
No description
fascinating-indigo
fascinating-indigo4/21/2025

Typing a factory function for createFileRoute

Hello everyone, I am trying to create a factory function that returns a createFileRoute with some options predefined, but I am not able to type it correctly with all the generics. Here is an example what I am trying to accomplish: ```ts function customCreateFileRoute(path) { return (options) => {...
rival-black
rival-black4/21/2025

Layout route

I have a route /account that has two children so /account/settings and /account/edit. I'm using file based routing: ``` routes/ ā”œā”€ā”€ account/...
plain-purple
plain-purple4/20/2025

how to utilize the router to navigate ?

hi, do i miss something about utilizing the router.navigate() ? i exported the router from the app.tsx file so i can navigate from anywhere in my app (useNavigate would force me to be in a hook or component, i sometime want to navigate from an action). my is duplicated from doing it the way i do : ``` import ReactDOM from 'react-dom/client' import { RouterProvider, createRouter } from '@tanstack/react-router' import { QueryClient, QueryClientProvider } from '@tanstack/react-query'...
No description
extended-salmon
extended-salmon4/20/2025

File based pathless wrapping route in folder

I'm trying to figure out if I don't get the docs right. In the following situation with this folder structure: ```routes/ └── app/ └── get-started/ ā”œā”€ā”€ _layout.tsx...
extended-salmon
extended-salmon4/20/2025

Prevent useBlocker from showing alert on reload

im using useBlocker when i have a dialog open to make the back arrow instead going back in navigation closing the dialog, this works as expected but i dont want the alert on reload when the dialog its open, is there a way to prevent that but still make the back button close the dialog?
No description
fascinating-indigo
fascinating-indigo4/19/2025

How to generate html page for defined routes in build?

Been playing around with Tanstack router + Vite but noticed that even if multiple routes are defined, running build still only generates a single root level html. Given it has route info, I’d expected it to auto add those entry points. How are people achieving a MPA that hands off and behaves as SPA once hydrated?
sensitive-blue
sensitive-blue4/19/2025

beforeLoad or loader for authentication redirection

Hey everyone, have a pretty simple issue. I am building a react app, and am using the router's authenticated routes + supabase for authentication. I've included a screenshot of my auth.tsx file, and my AuthContext provider. When I navigate between routes, everything works fine. I can only go to protected routes when signed in. However, if I am signed in, and on a protected route, and then I fully reload the page, it brings me back to the login screen. It seems like the beforeLoad function doesn't have the values of the context provider in time on full-reload. However, if I switch the function in __auth.tsx to loader, it works every time, context.auth.isAuthenticated is true. Anybody know why this would be?...
No description
plain-purple
plain-purple4/19/2025

my first layout

hi guys, im trying to create a layout for my / signin / signup pages but i must have missed something because i have an error that tells me my route is equivalent to '/', here is the file ``` import { createFileRoute } from '@tanstack/react-router' export const Route = createFileRoute('/(auth)/_auth')({...
stormy-gold
stormy-gold4/18/2025

Get router search params imperatively one time

So I have form with about 10-15 fields and I’m trying synchronise form state values to the query params. I use routerApi.useSearch hook to get current search values on the first render and then I am managing that state in form only. To synchronise my form state with url search params I use onBlur. I can sync it in real time because when user editing it is very slow and sluggish, so that is why I updating search params only on blur....
conventional-tan
conventional-tan4/18/2025

Authenticated routes example white flash screen

Hi, I am comparing both Basic (file-based) and Authenticated routes examples from docs and I noticed that when we refresh the basic all looks fine but when we refresh the Authenticated routes examples then we see a white screen for ~ 100ms and then we see the page...
adverse-sapphire
adverse-sapphire4/17/2025

Electron app doesn't load when using Tanstack Router

I am currently having an issue with Tanstack Router is an ElectronForge project with Webpack here For the moment, I have setup my project with 0 error from anywhere is the code. But when I run the project, the console tells me different: and the problem is here, at the index.tsx file, at the end of createFileRoute("/") function. ...
No description
rising-crimson
rising-crimson4/17/2025

What's the point of ensureQueryData in RQ examples

Like here: https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-react-query?path=examples%2Freact%2Fstart-basic-react-query%2Fsrc%2Froutes%2Fusers.%24userId.tsx First the loader does this: ```tsx loader: async ({ context, params: { userId } }) => { await context.queryClient.ensureQueryData(userQueryOptions(userId))...
equal-aqua
equal-aqua4/16/2025

Code review, need advice on Auth Guarding Setup

stackblitz: https://stackblitz.com/edit/vitejs-vite-aaw7yap9?file=src%2Froutes%2Flogin.tsx The demo isn't super functional, but it gets the gist across. I'm trying to find a standardized setup for auth guarding authenticated routes. ...
xenophobic-harlequin
xenophobic-harlequin4/16/2025

Context with query not updating

Hey guys, I'm testing Tanstack router in addition to Tanstack query. To manage my user (with authent), I made a hook that looks like this: ```ts...