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

dependent-tan
dependent-tan2/10/2025

Before load not working in child routes

In the before load in the _authed.tsx I have it checking to see if the user is authenticated. _authed.tsx ```ts import { createFileRoute, Link } from "@tanstack/react-router";...
No description
rival-black
rival-black2/10/2025

Is it possible to navigate to a file component that is OUTSIDE the route tree?

I'm trying to understand If I need to put literally every components that need navigation to inside the route tree or I can also put them outside it. Thank you!
wise-white
wise-white2/10/2025

Why specify route path in code for file-based routes?

Hi, I'm learning about TSR via the website docs. I noticed that, for file based routing, the route paths still need to be specified in code like this ``` export const Route = createFileRoute('/posts')({ loader: fetchPosts, component: PostsComponent,...
multiple-amethyst
multiple-amethyst2/10/2025

Tanstack Start with Clerk and Convex

My current setup you can see on screen. All works fine except when I try to open webpage from bookmark like /dashboard/transactions/incomes on first render (I was logged) I'm getting error shown on image. Most important code parts:...
No description
correct-apricot
correct-apricot2/10/2025

Redirect to throws type error on dynamic route

I have a dynamic route setup and the types keep throwing me errors even tho the route is clearly there. ``` export const Route = createFileRoute("/doc/$exportId")({ loader: async ({ params: { exportId } }) => {...
sensitive-blue
sensitive-blue2/9/2025

Keeping large object in search params causing too long URL.

How you deal with large objects stored in search params? In my example, conditions of TableView can easily grow, that's why when user refresh page gets error Uri to long, how avoid that keeping all functionalities of shared link etc. of Tanstack Router. ``` /* =========================================...
sunny-green
sunny-green2/9/2025

Extracting Link props while retaining type safety

Hi, everyone. Need some help regarding utilizing router's typesafety in custom components. So as per docs, I was successfully able to create a custom link with same type safety as standard Link of tanstack. So far my code something like this:- ...
other-emerald
other-emerald2/8/2025

Authentication with tanstack-router

I am implementing access and refresh-token based authentication on a project and on the signup and login route, I make a check in the before-load function, if user exists, if it does then he is redirected to the last page he was on from the signup or login page (implementing typical auth behaviour). But doing so is giving an error and the page doesn't load, if I comment out the code for before-load then everything works. ```Error Message: Request failed with status code 401 Stack Trace: AxiosError: Request failed with status code 401...
deep-jade
deep-jade2/8/2025

Advice on path-based i18n without lazy-loading or importing every language on the client.

I'm looking to build a pretty straight-forward path-based i18n setup like: ``` /en/projects /en/projects/1...
optimistic-gold
optimistic-gold2/8/2025

Client side routing 404 error on refresh.

I just deployed a react app using tanstack router to fly.io. When I access the delployed app it gives me a nginx 404 error after refreshing or after moving to another page. Is there a way to bypass this ?...
dependent-tan
dependent-tan2/6/2025

Validating Request Body, Typing API Routes, and Middleware Authentication in TanStack Start API

Hi, I’m using TanStack Start API routes and have a few questions:
1. Validating Request Body
I’m currently validating the request body in a POST route using Zod with safeParse, but request.body has to be validated like so: ...
exotic-emerald
exotic-emerald2/6/2025

All child routes in a single bundle?

Is it possible to include all child routes code in a single bundle. The generated bundle files for child routes are very small in size.
vicious-gold
vicious-gold2/6/2025

running beforeLoad auth in __root.tsx, but which needs access to a Context

basically at the __root i want to run auth checks beforeLoad. in this auth check, however, i need to set context values that will be available to the rest of the app. in order to wire up context to be available in the beforeLoad, I need the <Provider/> to be wrapping the component, right? but we're at the top level which makes things difficult. one idea is to update the component property of the Route object to return ...
No description
wise-white
wise-white2/6/2025

Routing issues with better-auth

I've built a TanStack Start app based on better-auth's example and struggling with two issues: 1. something navigates to /auth/signin? (the '?' is actually tacked on) when better-auth's signin runs. I don't know what is doing the navigation nor why it appends a '?'. 2. TanStack's navigation doesn't work inside better-auth's signin onSuccess callback. I've tried router.navigate and useNavigation with and without router.invalidate() and router.invalidate({sync: true}) The call to better-auth's signin function looks like this:...
ambitious-aqua
ambitious-aqua2/6/2025

Need advice on authentication

https://stackblitz.com/~/github.com/RenZin12/test-tanstack-router Here is my authenticated routes. The username is "Bob" and password is "123". In my backend, I am using session authentication. I am still quite new to React and TanStack router so I am still confuse on how they all come together. ...
old-apricot
old-apricot2/5/2025

Conditionally loading route tree based on user type

Working on a Start project where I want to conditionally load a different route tree based on the user type. Is this possible?
extended-salmon
extended-salmon2/5/2025

virtual file route

How to get started with virtual file routes? is that possible to get route for this file(please avoid code-based) : src/modules/user/index.tsx...
deep-jade
deep-jade2/5/2025

How to retrieve "latest params" when loading a route?

Hello, I have a /meetings page that have multiple filters (search params) and the requirement is that every time user navigates to this page, these parameters are retrieved, and he sees what he saw before. What's the idiomatic way to do handle it with tanstack/router?
correct-apricot
correct-apricot2/5/2025

Unexpected Loader Re-Requests on Current Route Hover with Preload ‘intent’

Why does the loader get re-requested every time I hover over a <Link> for the current route when the preload value is set to 'intent'? Is this intended behavior? When hovering over a <Link> for a different route, the request is not made again within the preloadStaleTime duration. I believe it should behave the same way.
optimistic-gold
optimistic-gold2/4/2025

Change parent layout based on child route matching

Hi, I have a parent layout component and I need to render it a bit differently if a certain child route is active. I've tried to do useLoaderData({ from: "child route" }) but it throws if the child route is not matched. Is it recommended to un-nest from the parent routes and just render the layout in the child route? If I do that, I can't grab the parent loaded data which means I have to repeat the parent data loading in the child route, it's not a problem, but I just wanted to know if there's a better way. Cheers...