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

fair-rose

2/7/2024

prettier on lint-staged throws an error with files starting with $, have you handled that?

I know It's not an error caused by the router, but I'd love to hear if you have found any workaround to make this work. In short, tokens starting with $ are removed so src/routes/$id.tsx is parsed as src/routes/.tsx which obviously does not exist and prettier can't find it...

xenophobic-harlequin

2/7/2024

weird "The above error occurred in the <MatchInner> component" error

I have a schedule route. ```ts const scheduleSearchSchema = z.object({ date: z .string()...

xenial-black

2/7/2024

only change url after a before load is successful

I've got pages that rely on the current path name being specific to their route. e.g. page Foo expects you to always be on /foo But I'm finding that when I navigate to /bar from within the application, my Foo page has a brief moment where the current path is /bar . ...

like-gold

2/6/2024

Router with TRPC

Can someone provide an example of how I might integrate TanStack router with TRPC? I'm looking at the Kitchen Sink React Query File Based https://tanstack.com/router/v1/docs/framework/react/examples/kitchen-sink-react-query-file-based, but its not clear how I could use trpc. I think it would be really nice if I could make use of all the TRPC niceties.

optimistic-gold

2/6/2024

How to hide the devtools in deployed apps?

I deployed an app with Tanstack router and devtools. The devtools are showing on the deployed app.

quickest-silver

2/6/2024

Why is parent route's loader triggered when children change

Example from the docs: https://tanstack.com/router/v1/docs/framework/react/examples/location-masking If you go to /photos and then /photos/$photoId/modal, the parent loader is triggered every time, even though its state doesn't change: Why is that? Is that a bug?...

correct-apricot

2/6/2024

Context & protected routes

Hi everyone, i'm having some issues with protected routes: If I go to a route from a link, the context is still passed, and there is not issues. But if I go to the URL from my browser like localhost/account then the context is null for like 0.2s....

xenial-black

2/5/2024

File-based routing: "/" to show landing page for users and dashboard/app for authenticated users

I'm trying to figure out if I can reproduce a Notion-like experience where "/" would serve the app if the user is authenticated and a landing page if not. I know I can use ternaries but ideally I would love to have different files....

frozen-sapphire

2/5/2024

DefaultGlobalNotFound in production

I hope this message finds you well. I am currently working on a desktop application developed with React and Electron. To enhance TypeScript integration, I opted for Tanstack Router over React Router. I acknowledge that my error may pertains to this specific and somewhat unique environment, involving the Electron-Vite boilerplate (https://electron-vite.org/) for scaffolding the project. While the routing functions flawlessly in the development environment, the challenge arises after building the project. Instead of displaying the expected routes, the application shows <p>Not Found</p>—the default global not found component discovered during my investigation of the library archives....

correct-apricot

2/5/2024

Get params without including it in file name.

Hi! I have an URL like that: http://localhost:5173/auth/login?error=already_exists I want to get the error value without having the $error in my file name....

quickest-silver

2/5/2024

Sharing routes between parents (or loading parallel routes)

I have following pages in my root: ``` /dashboard /abc-detail/$id /xyz-detail/$id...

conscious-sapphire

2/4/2024

Router Context Error: Property does not exist on type {}

I have defined a custom interface for my router context and I'm creating my root route using createRootRouteWithContext<MyRouterContext> as per the docs (as far as I can tell) but in my route loader I'm getting the error: "Property academicYear does not exist on type {}" where academicYear is one of the properties defined in my interface.

correct-apricot

2/4/2024

Layouts & folder structure

yeah

xenophobic-harlequin

2/4/2024

How to give better names for route.tsx / route.lazy.tsx

I have this nested mess, and i'd like to give some better naming. but I want to keep the functionality of the route/route.lazy obs whats the solution for this?...

continuing-cyan

2/4/2024

Convenient search param setter?

Heya, I was playing around a bit with updating search params when using inputs and selects and I wondered if there is any conventient way to update search params? Right now I assume I have to use navigate({ search: prev => ({ ...prev, property: value })) everywhere in the onChange handlers.. ...

foreign-sapphire

2/4/2024

Routing doesn't works!

I have exactly made a lazy loading route called about and called that via link component! Don't know why but every time it changes it's path on the url bar but the content of that page is not displayed!

other-emerald

2/3/2024

Should all path params be required for relative navigation?

I have my routes setup like the following: /customers/$customerId/ (customerRoute) /customers/$customerId/orders/$orderId (customerOrderRoute) ...

intense-chocolate

2/3/2024

Is there any way to programmatically trigger redirect using file based routing?

I have a callback which listens for changes on a user object. I've rigged it such that when the callback is called, it would redirect the user based on the arguments passed into the callback. The only problem is that the redirect doesn't actually work. Please help

stormy-gold

2/3/2024

Weird bug that cannot be reproduced in stackblitz and wasn't happening with react-router-dom

I have a weird bug that it wasn't happending with react-router-dom. I have two routes that the first is the tasks list and the second is /tasks/$taskId. $taskId is the child of /tasks route. When going DIRECTLY within the URL for example /tasks/4 and press the X button to close the sheet i see the network that refetches data for this route, like the component remounts on close. I'm using file-based routing for this. Can someone test it in their local to see if its happening? I use react-query inside the /tasks/$taskId route....

correct-apricot

2/3/2024

__root and context

So this is my main.tsx ```ts const router = createRouter({ routeTree, defaultPendingComponent: () => (...

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