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

broad-brown

3/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...

wise-white

3/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? ...

fair-rose

3/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:...

extended-salmon

3/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...

quickest-silver

3/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();

...

broad-brown

3/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?

rising-crimson

3/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'; ...

quickest-silver

3/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...

fascinating-indigo

3/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?...

xenial-black

3/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)...

quickest-silver

3/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!

quickest-silver

2/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?...

conscious-sapphire

2/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...

genetic-orange

2/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 ...

exotic-emerald

2/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 ?...

correct-apricot

2/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....

stormy-gold

2/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. ...

national-gold

2/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 = () => {...

exotic-emerald

2/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'...

fascinating-indigo

2/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....

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