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

foreign-sapphire

8/7/2024

'rules-of-hooks' ESLint rule conflicts with inline route components

When plugin-hooks/recommended is used, the following code causes an ESLint error:

const Route = createRoute({
  component: () => {
    useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks

const Route = createRoute({
  component: () => {
    useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks

Should we just never write components inline like this? Functionally it makes no difference. That would be just to appease this rule. Any recommendations?...

rare-sapphire

8/6/2024

Abort preload when navigating to different route

I use tanstack router in combination with tanstack query. In my route loader function I use queryClient.ensureQueryData. This loader is triggered with I hover over the Link component (because of the preload functionality). ```tsx ......

plain-purple

8/5/2024

Meta Tags & SEO

what's the best approach to this using tanstack router?

flat-fuchsia

8/5/2024

TanStack Router Docs Wrong? - Auth Example

Is it possible this is a typo? https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes Under redirecting...

optimistic-gold

8/2/2024

Updated routes broke my application.

I can no longer access a specific user or a specific organisation by their id. Have I done something that messes up the routes? I have even tried to remove the routeTree.gen.ts to regenerate it....

other-emerald

8/2/2024

Do you typically put route components inline or import external components ?

Hi, I'm working on an app with tanstack router using a feature-based folder structure and file-based routing and was wondering how people typically achieve a structure like this. In the vast majority of TR articles/tutorials/etc I see people directly coding their route components (effectively the views/pages) within the route files but for large pages this seems clunky. I guess this could be useful for heavily nested uis but mine so far is fairly straight forward with one page per route (aside from layout routes etc). I assume there's no hard and fast rule here, but I'd be interested in hearing how more experienced TR devs do it....

robust-apricot

8/1/2024

Loading data in router using tanstack-query but need api token from react hook

I'm looking to load some data within my routes using the loader method. However, my scenario is that accessing my API server requires a JWT token and the only method I have available for that is a react hook. Since the loader isn't a react component, I can't straightforwardly call my getToken() method from there. I'm keen on being able to do this so if anyone has any suggestions I'd appreciate hearing them. For one thing, I'd need this in order to do any data loading via the router. For another, my current use case is that I need to load data in the router so that I can dynamically populate my breadcrumb trail. The idea is that when accessing the path /entity/{id}, the router can look up the relevant entity by its id and display e.g. its name or title in the breadcrumb trail. In principle, this can work (see e.g. https://github.com/TanStack/router/discussions/895). But not being able to access the getToken() method is currently preventing me from doing this in the most obvious way. For context, I'm using axios to handle my API calls and I have a useEffect() in my root route (routes/__root.tsx) which adds an interceptor to my axios instance which calls getToken() and then adds it to the axios request as an authorization header. This works for regular uses of useQuery within my react components and pages. But I can't figure out how to make it work in the router's loader method. Any ideas would be much appreciated!...

xenial-black

8/1/2024

How to get route context correctly typed?

Hi everyone, could someone help me understand how match.routeContext gets its type? I was reading the documentation about "Processing Accumulated Route Context" and from my understanding the type should extend the Router Context defined in createRootRouteWithContext. But I get an error if I try to access the properties that I define in Router Context. Should I define the correct type somewhere else? Edit: I made a codesandbox...

harsh-harlequin

8/1/2024

getting issue with pending component

I'm working with TanStack Router and have a few questions. My use case involves calling some APIs that are common to a few child routes. I'm using the beforeLoad method in the root route to fetch this data and set it up in the route context, so each route has access to this data. However, I'm encountering some issues: The pending component does not display when beforeLoad is fetching data for any route, whether it's the root or any child route. The pending component does not display when the loader is loading for the __root route....

deep-jade

8/1/2024

Search on keystroke

I have the following search field ```tsx <div className="relative"> <Input...

eastern-cyan

8/1/2024

possibility to check if can go back

Hello 👋 Does any one knows how to implement check if there is a route in history to go back in order to prevent leaving my application when coming from browser link? I know that such feature exists in react-router, but I don’t wanna go back to it after trying typed routes and query params....

magic-beige

8/1/2024

Nested route group navigation

I have the following file-based structure: ``` /user/$id - route.tsx - layout file for users...

robust-apricot

7/31/2024

How to configure router with queryClient in context?

I'm interested in using the router to load/pre-load data via react-query. The example code at "How about an external data fetching library? (https://tanstack.com/router/latest/docs/framework/react/guide/router-context#how-about-an-external-data-fetching-library) is: `import { createRootRouteWithContext, createRouter, } from '@tanstack/react-router'...

sunny-green

7/31/2024

Why providing queryClient as context

I have a question about the use of queryClient and providing it to the createRouter context. I wonder why should a user do that? The entire app inclusively the router can use the queryClient directly? ```ts //https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query-file-based...

foreign-sapphire

7/30/2024

Styling parent of <Link> with active state

I'd like to style a navigation that's structured like this:```html <ul> <li className="active"> <Link to="/foo">...</Link> </li>...

foreign-sapphire

7/30/2024

"The useLoaderData hook accepts a single optional argument" - TypeScript says it's not optional

The docs that say this: https://tanstack.com/router/latest/docs/framework/react/api/router/useLoaderDataHook#useloaderdata-options When i use it:...

foreign-sapphire

7/30/2024

Using TSR in an existing app that already uses GET param routing

Hi, i'd like to use TSR in an app that already uses a GET param for routing, i.e. i'd like to use TSR while on this URL: example.com/?module=foo. The module=foo param will always be there and i'd like to make TSR use additional GET params to store the current client-side-only route / parameters, e.g. example.com/?module=foo&page=about. Is this possible?...

other-emerald

7/29/2024

Typing issue with IntelliJ IDEA

Hi, I noticed the following error on a TR skeleton project (first time TR user following the docs!). ```...

optimistic-gold

7/29/2024

How to invalidate route from the __root.tsx?

Hello, I have PWA background-sync mechanism in my app and I sent a message with some data from service-worker to the app. I'd like to handle these messages in one listener, in __root.tsx. When I go to /about page and there's no internet connection, I render ErrorComponent but I'd like to reload this page once I'm online again (so it's when I get message from sw) That's what I tried: ```...

other-emerald

7/27/2024

Accessing Path Params For Component in createRoute

Lets say i have a general component that accepts a prop called id, how would I pass that id to my component without having to define route functions inside my component. I'm wondering if something like this is possible: ``` const Route = createFileRoute('/posts/$postId')({ component: () => <PostComponent id={id} /> })...

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