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

9/13/2024

Pending component not showing on beforeLoad on rootRoute

It seems that if you do a beforeLoad on the root route it doesn't render the pending component. Is this intended ? https://stackblitz.com/edit/tanstack-router-4kxhzc?file=app%2Froutes%2F__root.tsx&preset=node...

deep-jade

9/13/2024

How to get a dynamic route path without the dynamic part?

What I mean by that is, how can I get something like "users/$userId" and not "users/123"?

conscious-sapphire

9/12/2024

Relay

Does anyone use Relay and the Entrypoint pattern? I'm currently using react router with https://github.com/loop-payments/react-router-relay, i want to test using tanstack router since react router has unnecessary re-renders that impact my app (has 3d visualizations so rerenders are pain) (https://github.com/remix-run/react-router/issues/7634). This is all i found https://github.com/TanStack/router/discussions/807, I suspect its possible but just checking first...

fascinating-indigo

9/12/2024

Trying to set up global context and running into errors

I'm sure my inability to figure this out is due to being very new at this but I just can't figure out what exactly I am missing here. I get errors you can see at the following Gist... https://gist.github.com/Dave-Wagner/ab444330743318b1d44e41f161d4fe78 If anyone can take a look and just point me in the right direction I'd highly appreciate it....

stormy-gold

9/12/2024

Possible to make child route's `beforeLoad()` not run when parent route throws a redirect?

Given these routes: * /accounts/$accountId/route.tsx * /accounts/$accountId/settings/billing.tsx We use route param placeholders so we can link to account routes from emails, e.g. to /accounts/_/settings/billing and we replace the _ value with the currently logged in $accountId....

genetic-orange

9/12/2024

Recommended Path Segment

Lets say I have the following routes - hello - hello/foo - hello/bar - hello/fee ...

stormy-gold

9/11/2024

Are there workarounds for using validateSearch with lazy file routes?

Looking to reap the benefits of validateSearch alongside lazy-loaded routes (createLazyFileRoute). I get why it's not possible, but, wondering if there's a preferred work-around or some magic cooking to make validation possible once a lazy route file has loaded. 🙏 Thanks all!

genetic-orange

9/11/2024

How do I pass queryClient throughout my app with tanstack router/query

I want to pass the queryClient object to all pages in app, but I am unable to access it from the Dashboard. When I include the link to my Dashboard in the NavgationHeader, I am able to access the queryClient object, but I don't want to have the Dashboard in that file., main.tsx: ``` const routeTree = rootRoute.addChildren([indexRoute, signupRoute, signinRoute, dashboardRoute]) ...

afraid-scarlet

9/11/2024

Following TanStack Start tutorial / Playing with example and app won't start

Getting this error:

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

when playing around with this tutorial https://tanstack.com/router/latest/docs/framework/react/start/getting-started. Downloaded the project from Stackblitz as well and it still won't open up. What could be the issue?

conscious-sapphire

9/10/2024

Deeply passing down context

I have a React hook which provides a wrapper around fetch which automatically retrieves an access token via another hook. Within previous custom useQuery() hooks, I could just use that hook, since everything was React hooks. Now within TanStack Router, I don't have that option anymore. I know that I can pass the hook result through context and then pass the wrapped fetch function through to *QueryOptions() methods, but that seems extremely repetitive. Is there a better make the result of my original hook available to all my fetch*() functions without having to pass it down in every single place?...

other-emerald

9/10/2024

useMatchRoute and useLocation are not in sync

after i navigate my useLocation and useMatchRoute hooks are out of sync with eachother. ```function MyComponent() { const location = useLocation() const matchRoute = useMatchRoute() ...

rare-sapphire

9/9/2024

Dynamic Nav?

Can someone point me to a simple example of creating a dynamic nav based on file-based routes? I am feeling pretty dumb that I can't find an example in the docs.

unwilling-turquoise

9/9/2024

500ms delay loading lazy routes

I just followed the react getting started guide and noticed that there's a 500ms delay on loading the default index and the about route. I fired up react profiler and it shows Memo(MatchInnerImpl) suspended during mount it lasts for ~500ms before rendering the route. Is this normal or am I missing something? 500 ms delay to render an almost empty component seems too high. Code here: https://stackblitz.com/edit/vitejs-vite-gfcz4b?file=src%2Fmain.tsx...

fascinating-indigo

9/9/2024

Is there an example with TanStack Router and Clerk somewhere?

I can see the TanStack Start example but not one with just Vite + Router

rare-sapphire

9/8/2024

Link search without from

I have links that I want to use in every list / table view in my app like this one: ```typescript <DropdownMenuItem asChild> <Link search={(prev) => ({ ...prev, sort: undefined })}>...

stuck-chocolate

9/8/2024

Loader causes re-render sometimes

Hello! im using the loader feature of tanstack router with tanstack query, and only in the first load of the page, and only sometimes, the page enters in a render cycle for around 2s, in this example i would expect the log to show onCe or twice, but its showing like 200 times ``` export const Route = createFileRoute('/item/$itemURL')({ component: () => {...

foreign-sapphire

9/7/2024

Can't generate route tree

[vite] Internal server error: Failed to resolve import "./routeTree.gen" from "src/index.tsx". Does the file exist? in a completely normal React Vite project.

ratty-blush

9/7/2024

protected endpoint with lazy loader & directories

Hi, I've got a _auth.tsx that uses the guide from Authenticated routes. How would I move e.g. my /settings page into a directory but yet keep _auth.tsx ? ...

deep-jade

9/7/2024

How to use invalidate in hooks (auth Context)

I don't know how to use router.invalidate() on my onAuthStateChange listener to make sure that user data is always ok. The problem is useRouter needs to be called inside Router Provider and my Auth Context Provider is outside of it and it can't be changed with how tanstack router works ( I guess ). authContext.tsx ```tsx...

ratty-blush

9/6/2024

Exported variable 'router' has or is using name 'FileRouteTypes' from external module src/routeTree

Full error:

Exported variable 'router' has or is using name 'FileRouteTypes' from external module "../src/routeTree.gen" but cannot be named.

This also happens with RouteRootChildren. I see both of these interfaces inside of routeTree.gen.ts but am not sure how to fix it....

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