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

like-gold

4/30/2024

redirecting in beforeLoader changes url but not the mounted component

hey all i had a quick question regarding the redirect feature ```js export const Route = createFileRoute("/auth/instagram")({...

genetic-orange

4/30/2024

Setting up a keylogging component to navigate to specific section of site

Hi I have a component which checks for our university's student identifier format which can come in from a barcode scanner we have and if one is detected I'd like to redirect the client to a page to sign them in. This is my current code https://gist.github.com/Gobot1234/e6178026a3f21fcf4eb3e8812c9d719c current I get a warning with the component Warning: useRouter must be used inside a <RouterProvider> component! this is how I mount everything ```ts function InnerApp() { const auth = useAuth();...

generous-apricot

4/30/2024

Multiple root routers with file based routing

Hi, I would like to know if it was possible, using the file based router mode, to create within the same project multiple root “routers”. Specifically my use case is that I am creating a browser extension using Plasmo, and so it is as if I have to create multiple separate applications (popup, content, etc.) within a single project containing a single package.json ....

conscious-sapphire

4/29/2024

`loader` function doesn't have access to `context` after being redirected to

I load a route and check some things in the loader function. If it errors, I throw redirect to another route. That route, however, doesn't seem to have access to the context in its loader function. routes/offers.tsx ``` ......

rare-sapphire

4/29/2024

How to type LazyRoute with code-based splitting?

I tried to implement route based code splitting following this section of the docs: https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#code-based-splitting When I implemented as shown in the example, I get following eslint error:

Unsafe return of type Promise<any> from function with return type Promise<LazyRoute<any>>.eslint@typescript-eslint/no-unsafe-return...

absent-sapphire

4/29/2024

ActiveOptions matcher fn

https://tanstack.com/router/latest/docs/framework/react/guide/navigation#active-options Would it be possible to have a matcher function for the ActiveOptions?
I have an invoices route in my sidebar with additional options to filter the invoice by status. When I search the invoices, the 'search' searchParam is updated which removes the active state on route....

wee-brown

4/29/2024

useId use

Hi everyone, what is the use of useId hook? why can’t we use hard coded id for related elements as shown in the example in react documentation?...

sensitive-blue

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];...

sensitive-blue

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. ```...

fascinating-indigo

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

rival-black

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

fascinating-indigo

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

protestant-coral

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

deep-jade

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

absent-sapphire

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

manual-pink

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: ```...

fascinating-indigo

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

rare-sapphire

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

absent-sapphire

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

other-emerald

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

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