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

metropolitan-bronze

8/3/2023

Possible type exhaustion with dependency injection?

Just checking if anyone else has ran into these TS errors from the router. Nothing critical, with no rush or urgency on this, as I'm still running the app fine without dependency injection. Is anyone doing dependency injection of the react-query QueryClient in something larger with a multi-file routes setup? I'm currently storing a decent bit of state in the query-params, and when I set the RouterContext generic to {queryClient: typeof queryClient} it then loses the types of the queryParams in the <Link /> component and also triggers some Type instantiation is excessively deep and possibly infinite. errors....

eager-peach

8/2/2023

Devtools - Uncaught Error: Invariant failed

Does anyone have an idea why I'm getting that error when using the router dev tools. I followed the documentation BTW and I'm using react 18.2.0

fair-rose

7/30/2023

Using hooks inside of loaders

Is it expected to not be able to use hooks inside of loaders?

xenial-black

7/30/2023

TS errors when you use search params to conditionally render in the "root" of a component

If I do something like ``` function BrokenApp() { const { shouldRenderApp } = useSearch({ from: brokenAppRoute.id });...

foreign-sapphire

7/30/2023

Creating a <Link/> from a `match` and filtering matches to remove layout routes

Hi, I'm building a breadcrumb component. Previously when using an older version of router, I used the useMatches hook but have now replaced that with useRouter().state.matches as it contains the context type on each match. The first problem I have is that useRouter().state.matches returns layout routes as well as regular routes. useMatches did not do this. Is there a recommended why of filtering those out? Secondly, am I able to create a <Link/> from a particular match? I've tried <Link id={match.id} params={match.params} search={match.search} />, but that doesn't work. I think that makes sense because it doesn't know if each of those three parameters are the correct type for each other....

solid-orange

7/29/2023

error TS2344 without skipLibCheck: true

Hi. I'm getting these errors when skipLibCheck is not true in my tsconfig.json. The literals in the union are paths of the direct children of my RootRoute. Is there a good way to avoid these errors without enabling skipLibCheck? ```log node_modules/.pnpm/@tanstack+router@0.0.1-beta.119_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/router/build/types/react.d.ts:23:106 - error TS2344: Type 'TFrom' does not satisfy the constraint '"" | "/" | "/dashboard"'. Type 'string' is not assignable to type '"" | "/" | "/dashboard"'....

adverse-sapphire

7/28/2023

Child route not rendering

```typescript const Root = () => ( <Suspense> <App /> </Suspense>...

foreign-sapphire

7/26/2023

Lots-o-re-rendering?

Every component in the route tree seems to re-render twice on every page nav. Is this the expected behavior? On version 0.0.1-beta.119...

passive-yellow

7/25/2023

Scroll Restoration?

I see that Scroll Restoration is not supported in Tanstack Router but it is supported in React Router DOM. If I try the "Basic" example, I go to "Posts", scroll down a bit, then go to "Home", and then press browser back to go back to the previous "Posts" page, the scroll position is retained. What does "Not supported" exactly mean in this case? Would it mean if the scrollable view is nested, it wouldn't work? E.g. if the page is rendered in an Outlet?...

extended-salmon

7/22/2023

SSR error when not using SSR

'Expected to find a TSR_DEHYDRATED property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?', however i am not ussing SSR. Any idea what might be triggering this? the call to hydrate is checking
```...

eastern-cyan

7/20/2023

Use router for SPA?

It is possible to use this library to create a SPA? I'd like a more mature framework for handling navigation in a Chrome extension, and this looks like a promising alternative to React Router.

solid-orange

7/19/2023

How do I declare the type for the props of a Route component?

Specifically, I'm talking about the component passed to the Route constructor. I've looked at the RouteProps type but 14 generic type parameters tells me it's not meant for direct use. I can't just Pick<typeof routeInstance, 'useParams' | etc> as that's a circular reference. Additionally, I can't find a MakeRouteProps like MakeLinkPropsOptions....

rising-crimson

7/18/2023

Router Loaders and/or Query

Hey all, by reading the docs about data loading using react router (https://tanstack.com/router/v1/docs/guide/data-loading#tanstack-loaders), one thing that still not clear to me is if there's any reasons to add a new lib like Tanstack query for data caching and etc or if Router Loaders already does that. Is there any reason/benefit on using Tanstack query with Tanstack Router? Or Tanstack Loaders covers it all?

conscious-sapphire

7/12/2023

Page transitions

Hi, does anyone know if we can make entry/exit animations with libraries like framer-motion? I think entry animations do work but not exit ones, I've tried to wrap <Outlet/> in <AnimatePresence/> but that doesn't seem to be doing anything just like in React Router. Thanks...

sunny-green

7/10/2023

Unavailable nested routes not throwing 404 page

I'm learning Tanstack Router and am trying to implement a basic POC. The issue that I'm facing is that /about works as expected but /about/xyzis also showing the contents of the about page. This page should ideally show a 404 page. Any idea what am I missing here? ```tsx...

national-gold

7/9/2023

Is router.state.currentMatches supposed to return folder path and it's index?

i'am using file-based routing in this exmaple what usecase i need the "/dashboard/" still learning?

correct-apricot

7/8/2023

Is it possible to display subpath on the root Outlet?

I wonder if there is any way to display a subpath (let’s say /customers/$id) without putting another Outlet in the parent, but using the main one. In the end I want the dynamic path to display instead of the parent Example done in react router: https://stackblitz.com/edit/stackblitz-starters-casmii?file=src%2FApp.tsx...

quickest-silver

7/5/2023

What version should I use to match the documentation?

Hey everyone, first time poster here. I found TanStack because i was looking for a typesafe router for react, now I am stumped when using the latest beta release while following the documentation. I am following this doc about loading data: https://tanstack.com/router/v1/docs/guide/data-loading#the-loader-route-option...

stuck-chocolate

7/2/2023

Supabase auth does not work with tanstack router

This happens when supabase redirects back to application with an access token with #accessToken= in the url.

fascinating-indigo

7/1/2023

Best pattern for fallback paths?

Hi yall, I'm trying to redirect invalid paths to root path. Not sure how to do this correctly (or at all). Maybe, is there a list of routes I can check against, maybe a hook or router method? Then I can redirect manually?...

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