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

correct-apricot

1/31/2025

Where search validation happens?

I have many cards when I click on it it gets highlighted. The logic is simple, I get the selected id from hook route.useSearch. I use useNavigate().navigate() to set the active id The problem is when I set the internet to slow on dev tools the cards take a lot of time to get highlighted. ...

jolly-crimson

1/31/2025

How to refetch/invalidate router data?

I want to revalidate router data after an API change, There is any way I can easily force the router loader to refetch the data and the child components to updated using the useRouterData?

absent-sapphire

1/30/2025

Help! 30 seconds to first paint

I must be doing something upside down and inside out. When loading fresh (no local cache, etc.), my app can take up to 30s before it's actually rendered. Instrumenting the performance hasn't revealed anything obvious. In fact, some of the time the browser reports that the initial frame renders in <1s although nothing is visible until 20-30seconds later. Any tips on how to investigate and debug this would be super helpful! Here's an example of a typical route in my app:...

foreign-sapphire

1/29/2025

"Error: Invariant failed: Could not find match for from: /posts" + "Error preloading route! ☝"

Hey! Whenever I simulate different viewport in the browser, I'm getting warnings with errors in the title whenever I go into /post/$postId route from /posts while the fetch with $postId is not yet finished. This warning is not displayed at all when I don't simulate the viewports. I've tested this on multiple viewports but the warning is displayed every time. Everything seems to be working just fine but I'm not sure if it's safe to ignore this warning or not. Here's the minimal reproduction link: https://stackblitz.com/edit/tanstack-router-ijhtsvaj?file=src%2Froutes%2Fposts_.%24postId.tsx. I've made minimal changes to posts_.$postId.tsx, and I've increased the sleep in postQueryOptions to 2000ms. You'll have to open the preview in new tab to see the console. I've also added a video showcasing the problem to make it simpler to understand 🫡...

conscious-sapphire

1/29/2025

staticData on a lazy route

Hi, I want to make a breadcrumb component using useMatches and staticData on my routes. Everything is ok until I want to use lazy route with createLazyFileRoute which doesn't allow staticData to be passed. I would like to know if there's an alternative to using staticData to achieve what I want to do, or if I need to stay on non lazy routes....

rare-sapphire

1/29/2025

[vite] Internal server error: [...]routeTree.gen.ts:28:1: ERROR: Expected identifier but found "/"

I am setting up a new vite-react project and intend to use tanstack-router. I have followed the Quick start instructions, but end up getting the following error when I run the development server. I have copied and named the files and directories as per the docs; __root.tsx, about.lazy.tsx, index.lazy.tsx, main.tsx....

optimistic-gold

1/29/2025

can i have multiple Pathless Route Group Directories at the same level, each with a layout inside?

i'm looking to have the following structure ``` routes (auth)...

constant-blue

1/29/2025

[iOS] Page swipe issues when beforeLoad runs an async fetch

On swipe back on iOS (safari), it would briefly flash the previous screen and then load the correct screen. This issue also exists on TS Start. Has anyone figured out a way to make this be less noticeable? I've looked across the internet and it seems to be a prevalent issue in client-side routing and iOS's "page preview" thing....

optimistic-gold

1/29/2025

will the vite server generate the routeTree if I've deleted it

i've gotten into a weird state with customizing the config (and i'll probably continue to tweak it) and seem to have gotten my project into a tricky state do i need to manually create this file, or should it be autogenerating when i boot the dev server?...

fair-rose

1/29/2025

path: '/', is generated unexpectedly

I have 3 group routes, as shown, and only the (public) group has an index.tsx but a / path is generted for the (protected) what is even weirder is that the (auth) did not generate for this path

extended-salmon

1/28/2025

Trailing slash when SSR, otherwise it's ignored

I have a route config that looks like this: ```text routes/ ├── app/ │ ├── games/...

inc-lavender

1/28/2025

Using Router with React Context/Hooks

I used the examples in the docs to set up my React context and hooks so that they run before Router and inject the values into the Router context. However, now I have a chicken and egg problem, where I need some of the URL params in my hooks (I used useMatches from React Router), but I don't have access to the router to get those params. And when I manually try to extract different params with regex (very hacky, not scaleable), I still get issues of race conditions when navigating directly to a...

unwilling-turquoise

1/28/2025

How to show root level page not found when I have nested routes with pathless route.

I have this dummy project, at this moment I am able get page not found at root level, but I don't get when the route is /auth/* or /auth/login/* or /auth/signup/* ``` / ├── about/ └── auth/...

rival-black

1/28/2025

Bypass pendingMs for certain links

I'm looking for a way to bypass pendingMs, i.e. never fall back to a suspense boundary, for certain links. Our use case is that we have a page with lots of filters and knobs for the user to tweak the data that is displayed on the page. When clicking any of the links that apply those filters (as search params), we never want the page to suspend. However, we don't want to set a really high pendingMs for that page either just to avoid it, because then the page will not show it's loading state on entry, which we do want. So basically we're looking for this behaviour: * When navigating to that page, fall back pendingComponent until the data has loaded * When navigating within that page (applying search params), never fall back to pendingComponent...

stormy-gold

1/27/2025

can useSearch be used from inside a portal?

I have a component that if the width of the screen is smaller than 992 renders the content inside a portal outside the div that contains the main react app If I don't use the portal everything works as expected, but if I add the portal, the useSearch works as expected when loading, but, when moving to a different page I get Could not find a nearest match! I'm using just strict false as the useSearch parameters, inspecting the error I think I found why this is happening, inside the useMatch function called by the useSearch, its not returning a match (image 1) since my nearestMatchId is /category/_category/$casual (which is the page I was previously on) and state.matches only includes root route and the route im going to....

generous-apricot

1/27/2025

How to catch chunk loading issues and reload gracefully?

In Vite, if a lazy chunk fails to be loaded, an event is dispatched to the window: 'vite:preloadError'. For reference, I'll just copy the explanation from the vite docs:

When a new deployment occurs, the hosting service may delete the assets from previous deployments. As a result, a user who visited your site before the new deployment might encounter an import error.

https://vite.dev/guide/build.html#load-error-handling When using tanstack/router, the loading of route chunks seems to be handled by tanstack instead of Vite and this event is not dispatched. (Tell me if I'm wrong here, but I couldn't catch it)....

quaint-moccasin

1/27/2025

zodValidator in Route.useSearch return different types

According to this https://tanstack.com/router/latest/docs/framework/react/guide/search-params#zod I should be able to access my variables with Route.useSearch() but whenever i do it, it gives me the types of parse, input and output. Is this normal?...

absent-sapphire

1/27/2025

Cannot get route type for some routes

I'm struggling to get the right type for some routes. The question: Why is my file route campaignDraftsRoute not satisfying TRoute extends AnyRoute but other routes are? I have the following file route:...

wise-white

1/27/2025

Can I add custom information to RouteOptions?

I'm using TanStack Router with file-based routing and I'd like to dynamically generate my menu from the route tree. In order to do this, I need to have some extra metadata for each route (i.e. title, sort, etc.). Is it possible to add some extra information when calling createFileRoute (or createLazyFileRoute) that I can then access from the route tree data from useRouter or similar? Something like this, perhaps?...

rare-sapphire

1/27/2025

Route Re-rendering when using query params on same path

I recently started using TanStack Start with Query and Table, and I’ve run into an issue I’m hoping someone can help with. I have an API endpoint that has "limit", "offset" and "search". These values are passed through query params, and I’m using the useReactTable hook to manage the table’s state. ...

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