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

adverse-sapphire

4/28/2024

How Smelly Is It To Add Components to Router Context?

I'm using nested layouts, but sometimes I need to break out of them. For example, I have a fixed top nav that's is always there. But, on some pages I want to add a save button up there. ```ts const routerState = useRouterState(); const lastMatch = routerState.matches[routerState.matches.length - 1];...

statutory-emerald

4/28/2024

Website broken? (only https://tanstack.com/router/latest)

Hi, when opening https://tanstack.com/router/latest in the browser (by entering that url in the url bar), the page stays white and errors are logged on the console. ```...

robust-apricot

4/28/2024

How to get typed routeMatch

Hi. I'm using matches from useRouterState and need to get typed match for some of them. I'm trying to use that :...

unwilling-turquoise

4/27/2024

How to check for a hash match

Hello, I would like to know how to check a match for a hash on a specific pathname E.g.: check if /my_path#my_hash is matched ...

robust-apricot

4/27/2024

to option in a layout

Hi ! I use a link in a layout (that means I will never be directly on this route but on its child routes) In this link, I'm using the layout route as from option and using relative path in to option....

eastern-cyan

4/27/2024

typescript performance issues

Does anyone have very slow typescript performance using tsr? I now have two pretty small apps with tsr (10-20 routes), and the lsp speed is multi seconds consistently. tsr seems to be a common denominator (not definitive, i have a skill issue knowing how to get traces from the ts server). Has anyone experienced something similar and solved the perf issues? Getting several second autocomplete time on an m2 mac pro is just brutal

like-gold

4/26/2024

How to create a "root" layout?

I was looking through the various TSR examples and noticed several that had __root.tsx file as well as an _layout.tsx file in the root of the /routes directory, such as in the Kitchen Sink example https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-react-query-file-based Based on my understanding of the _layout routes, I was expecting the JSX in /routes/_layout.tsx to be rendered by the __root Outlet even on the index page, but that doesnt seem to be the case. Am I correct in assuming that code from /routes/_layout.tsx file will only render for nested routes and wont actually apply to the root? In other words, the only components that will match on the root are whatever is in /routes/__root.tsx and /routes/index.tsx?...

ambitious-aqua

4/25/2024

Issue with Electron & vite & tanstack

Hi guys, having some issues with electron & vite & tanstack: Failed to resolve import "./routeTree.gen" from "src/renderer/src/app.tsx". Does the file exist? The routeTree never generate, there is my eletron.vite.config.ts: ...

quickest-silver

4/24/2024

monorepo setup

what's the recommended setup for working in a monorepo, given that TanStack Router uses module augmentation? we have a monorepo with a composite setup, so each package emits its own .d.ts files. Now our setup is roughly like this: ```...

robust-apricot

4/24/2024

to value is not assignable since upgrade.

Hi ! I tried to upgrade from 1.26.18 to 1.30 and noticed these type errors after trying to build the app. Type '".."' is not assignable to type '"../create" | "../delete/$vvaId" | "../../" | undefined' For example, this error is happening here :...

xenial-black

4/24/2024

Error on `beforeLoad` return

I have an asynchronous beforeLoad function. Its not clear to me why, but sometimes (especially when running in Safari on mobile) there is an error. Refreshing the page always fixes the problem. However, my main issue is that the error message is: ``` Unhandled Promise Rejection: [object Object] (anonymous function) - router.ts:1613...

other-emerald

4/23/2024

route.to not matching ToOptions

I just updated from 1.0.6 to 1.29.2 Using a route.to no longer has the trailing / and doesn't match anything in my router.
The routes still work so my assumption is that ToOptions is the wrong type to use here as it expects the trailing / where route.to trims this slash....

foreign-sapphire

4/23/2024

Nested Folder Index Routes

I am new to the TanStack Router. I can't figure out how nested folder index routes work. I want an Outlet for a route, with an index route. My route structure looks like this: - routes __root.tsx index.tsx...

ratty-blush

4/23/2024

change routegen location?

is there a way to change the routegen location?

ambitious-aqua

4/22/2024

Nested folder routes

The folder structure is in the image. When navigating to /projects/{projectId} I am seeing the page that's rendered on /projects. What am I missing? Why is the parent route of projectId in routeTree.gen.ts project and not root: ```ts const ProjectsRouteRoute = ProjectsRouteImport.update({...

fair-rose

4/22/2024

Is there a way to pass data when navigating?

Use case: on a page (parent) I have two tabs with inside a button each that navigate to a specific child page. From the child I want to navigate back but I also want to land in the right parent tab. How can I pass this info during the navigate? I attemped a hack with query params + route masking but I wish there was an easier way....

sensitive-blue

4/20/2024

How can I check for authentication errors on every loader call without copy and paste boilerplate?

I have a gist written here: https://gist.github.com/jeffreytgilbert/c65f14dd107e840ee893af2ed6ebeeae It both handles the async await and checks for the auth error code(see: useGetApi), but it wont import correctly for use in loaders. When trying, I receive the error: "SyntaxError: Importing binding name 'useGetApi' is not found." The Route/Loader code is as simple as this: const eventArtistsSearchRoute = createRoute({ /* irrelevant component and param parsing code here */...

rival-black

4/19/2024

Code split sub-routes together

Wondering if it's possible to control how lazy file-based routes are split out instead of having each route be in its own chunk. Potential desired behavior would be that everything below a certain path (e.g. /users would include /users, /users/1, /users/new, etc) would all be included in the same chunk so that once you "entered" that section of the site once you'd already have the rest of the code loaded.

generous-apricot

4/19/2024

Equivalent for query v4

Hi all in the doc of router to use tanstack query with router we got this example : ``` const postsQueryOptions = queryOptions({ queryKey: ['posts'], queryFn: () => fetchPosts(),...

foreign-sapphire

4/19/2024

mutateAsync vs mutate with options. What's the difference?

The docs on this page: https://tanstack.com/query/latest/docs/framework/react/guides/mutations#promises say "Use mutateAsync instead of mutate to get a promise which will resolve on success or throw on an error. This can for example be used to compose side effects." with the following code as an example: ```ts const mutation = useMutation({ mutationFn: addTodo }) try { const todo = await mutation.mutateAsync(todo)...

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