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

official-silver
official-silver3/6/2025

Change tab and route from within different component

I need to trigger a shadcn tab change in my route.tsx from within another component that is on the tab content. Is there a way to do this?
deep-jade
deep-jade3/6/2025

How to nested a 404 and 500 page?

Hi everyone, I'm working with TanStack Router and trying to implement different 404 and 500 error pages for different layouts. I have a __root.tsx layout and a _protected.tsx layout. My goal is to have a specific 404 page rendered when a route under the _protected layout is not found, without falling back to the 404 defined in __root.tsx. Currently, I've tried defining a notFoundComponent within _protected.tsx. However, when I navigate to a non-existent route within the _protected layout, it always renders the notFoundComponent defined in __root.tsx instead....
robust-apricot
robust-apricot3/6/2025

Router invalidate and context

We are looking at this one issue where router context gets stale and we need to call .invalidate to keep it fresh. Our auth is ran by Clerk so we want to grab the user and auth state whenever the session tokens have been changed. This setup works but its causing a very annoying "jump to top of page" whenever the context is refreshed. I may have missed something in the docs somewhere so im asking here, has anyone done anything similar or would happen to think of a better approach? ...
helpful-purple
helpful-purple3/6/2025

How To Route Masking Properly With File Based Routing

I tried route masking using file based routes. Here are the routes ``` // 1st routes/ ...
foreign-sapphire
foreign-sapphire3/5/2025

Tanstack auth context not working?

Followed this documentation https://tanstack.com/router/v1/docs/framework/react/guide/authenticated-routes#authentication-using-react-contexthooks And I'm getting this error. I'm having a hard time getting any leads. If anyone else can help me out lmk! Thanks! ```...
absent-sapphire
absent-sapphire3/5/2025

Calling API and updating search params before loading a route

Hi, I have a case where BEFORE loading a route I'd really like to make some API call to check something and then update the searchParams based on the result. Something like: click -> see loading -> API call in the background -> searchparams update -> route is loaded What's the best way to achieve that? I tried beforeLoad for context update, but in middleware I only have access to the search params and not to context...
metropolitan-bronze
metropolitan-bronze3/5/2025

Can I put all my redirects in a single file?

I'm rewriting an existing web app, and I have a bunch of routes that I'm looking to redirect. (I want old routes that a user might have as a bookmark to still take them to the appropriate place) I'm wondering if there's a way for me to handle all the redirects I need to set up in the application in one spot? ...
correct-apricot
correct-apricot3/5/2025

Why Route.useSearch returns any here?

Hello, This is probably a stupid question, but I can't find my mistake. In this route:...
rising-crimson
rising-crimson3/5/2025

Multiple nested pathless layouts at the same level

Is it possible to have multiple pathless layout files at the same level? Specifically, I am looking to have multiple layout files at the root of my project to match the logical split. eg to have a different file per service that I want to inject into the conext before load I'll might want to have _service-1.tsx, _service-2.tsx...
fair-rose
fair-rose3/4/2025

how to pass a process.env value from SSR context to client?

I have a .env variable for my API (let's say process.env.SERVER_API) and I want to make it available in my client. one way I thought to do this was context so my file route components could access it as:
const {apiBase} = Route.useRouteContext();
const {apiBase} = Route.useRouteContext();
...
absent-sapphire
absent-sapphire3/4/2025

How to detect page navigation and i.e. close mobile menu?

I have full-screen mobile menu with Links and I'd like to close it on-navigate. What's the proper way to handle it?
rare-sapphire
rare-sapphire3/4/2025

Can I redirect from the index route?

In nextjs, I can do this to not allow the user to load the index route. ``` import { redirect } from 'next/navigation'; ...
vicious-gold
vicious-gold3/3/2025

How to mock getRouteApi ?

Hey guys, So I have the following component that uses the getRouteApi to grab the teamId from the url. This component works very well when I render it in /teams/:teamId. ```tsx...
sunny-green
sunny-green3/3/2025

No shouldThrow option for useRouteContext

The useRouterContext hook sometimes throws a invariant error. I see in the source code that it uses useMatch, but there is currently no way for me now to pass shouldThrow as false to that useMatch. Could that be added as a possible property for useRouteContext?...
conscious-sapphire
conscious-sapphire3/3/2025

Can I have layout over my whole app except one route?

I currently have a sidebar setup in my root index.tsx file src/routes/index.tsx but I have an auth route for login and signining up ``` src/ |--routes/ | |--index.tsx (main layout)...
variable-lime
variable-lime3/2/2025

Are ViewTransitions implemented in Link components?

Do specific transition types work on Link components? I see typescript types in the packages, but no documentation currently, and cant seem to get them to work correctly. It keep defaulting back to the default fade transition. Thanks!
wise-white
wise-white2/28/2025

fetching data in beforeLoad and injecting it in context

Hey, i've recently started migration from react-router. Still wrapping my head around all the concepts, i'm using context as a vehicle for injecting data by fetching in beforeLoad and then returning data to be available for all the child routes in context. I find this very convenient but am not sure is this a good practice?...
deep-jade
deep-jade2/28/2025

matchRoute matches pending location

Hey, I have a small helper utility for matchRoute and I run into some issues with it returning in a in-between state. For the setup: - I have a redirect in my beforeLoad that is async that always redirects towards $organizationId/$projectId if you're not on any subpath of it - My link navigates to $organizationId...
No description
stormy-gold
stormy-gold2/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 ...
optimistic-gold
optimistic-gold2/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