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

7/30/2025

Best way to handle tabs in TanStack Router – path or search param?

Hey everyone! 👋 I'm building a page with multiple tabs using TanStack Router, and I'm trying to decide the best way to model the routing. Each tab shows different content, different components and possibly separate data fetching, while supporting deep linking. I’m considering two options:...

ratty-blush

7/30/2025

IIFE build option with code splitting?

Hi all, My apps require them to be built wrapped in an IIFE, I typically use the format option in vite build config for this (see screenshot) I want to move these apps to TS router, however, when I have this option in my vite build, I lose code splitting with .lazy routes....

like-gold

7/29/2025

Random issues around importing inside of multiple @tanstack/x packages

 Uncaught (in promise) SyntaxError: The requested module 'http://localhost:3000/node_modules/use-sync-external-store/shim/with-selector.js?v=d6fcbb5d' doesn't provide an export named: 'useSyncExternalStoreWithSelector'

 Uncaught (in promise) SyntaxError: The requested module 'http://localhost:3000/node_modules/use-sync-external-store/shim/with-selector.js?v=d6fcbb5d' doesn't provide an export named: 'useSyncExternalStoreWithSelector'

...

xenial-black

7/29/2025

Show loading state on expensive rerender when changing search params through router.navigate()

This is a demo case of a problem I'm facing in my real app. I have a date picker. Below the date picker are some relatively expensive components - I can feel that the navigation is sluggish because it takes a bit of time for the loading state to kick in I tried using useTransition so that the expensive parts are rendered concurrently. My hope was that I could use the isPending prop to render a loading spinner. However, it looks like I got the wrong approach, as it doesn't seem to help at all. Here's a small demo: https://codesandbox.io/p/github/revosw/tanstack-start-search-param-loading/main ...

correct-apricot

7/29/2025

SEO in TanStack Router

Hey there, can anyone help me with the right approach for SEO in TanStack Router, please? I mostly want SPA for my app, but then there are some parts like the public course page (https://learn.self-host.tech/courses/83311579-014d-4b50-ab58-d8e78d576426 - https://github.com/catalinpit/learn-platform/blob/main/client/src/routes/courses/%24courseId.tsx) that I want to appear in search engines. How should I go about this? Or should I "upgrade" to TanStack Start?...

vicious-gold

7/28/2025

Defining custom link prop types without breaking type inference

I'm migrating a next codebase to tanstack router, and we have a lot of components that can act either as a link or a button (something like Props = { onClick: () => void } | { href: UrlObject }. I'm trying to replace the link part with tanstack router links, so I tried the following:

type SomeButton = { onClick: () => void } | Pick<LinkComponentProps, "to" | "search" | "params">

type SomeButton = { onClick: () => void } | Pick<LinkComponentProps, "to" | "search" | "params">

...

absent-sapphire

7/28/2025

Configuring arrow-function style for route file auto generated code

In a monorepo I'm working in, we have the following react eslint rule set to enforce arrow-function style for react function components (https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md). When Tanstack router's auto code generation generates route file content, there's many things that can be configured looking at the configuration and the source code for the config: https://tanstack.com/router/latest/docs/framework/react/routing/installation-with-vite#configuration Is there an existing configuration to set for this? I couldn't find any. There is a customScaffolding configuration which I assume could be used for this, but I'd prefer not to muck around with the default template for a small thing as such. Would it be possible to include this as a config option for the generated code? ```ts declare const tanstackRouter: (options?: Partial<{...

passive-yellow

7/26/2025

Route.useParams() giving Unsafe assignment of an error typed value

```export const Route = createFileRoute('/(app)/portfolio/create/$userId/story/select')({ component: UserStory, }); function UserStory() {...

xenial-black

7/25/2025

How to render two routes at the same time (route inside another route)?

I have two panels of content on a page, side by side. One is quite basic, just some information that I'm getting, and is a perfect candidate for SSR. The other panel is more advanced, based 100% on user interactions and doesn't at all make sense for SSR. That's why I'd like to separate into two routes. I was thinking that if I had these routes: ``` /$post.tsx...

other-emerald

7/25/2025

Question about context propagation

Say we have structure like this, ``` routes/ __root.tsx index.tsx...

other-emerald

7/25/2025

Handling loading states when tanstack router and query used together

I am using Tanstack Router and Tanstack Query. I have a page (say index) like this. ``` <div> <SearchComponent> <TableComponent>...

xenial-black

7/25/2025

Route's beforeLoad behaviour

I've been working with TanStack Router, and I want make sure I understand this well. Say, I'm fetching some data in the beforeLoad of a route (eg /dashboard), and this data gets fetched whenever I load the dashboard page or any other page under the /dashboard route. What I want to know is, when moving between different pages under the /dashboard route using Link or navigate, does the data get refetched with each page I visit?

unwilling-turquoise

7/24/2025

Deprecated plugin

How come the router plugin is deprecated but when i use create-tsrouter-app this is the default.

rival-black

7/24/2025

v1.117.1 Doesn't Render Pending Component Instantly

After upgrading to the latest version of router, I've noticed that there's a screen flash (to an empty screen) before the pending component renders. https://www.loom.com/share/9bda2fdbe0ac4e629d41855b5c66c6ac The issue seems to be from this PR: https://github.com/TanStack/router/pull/4044/files...

harsh-harlequin

7/24/2025

Confused by isTransitioning (never true)

Hi folks. I am confused by useRouterState`s isTransitioning. When does it become true? ...

like-gold

7/23/2025

Multiple apps listening/modifying history

Hi, I have a micro-frontend architecture with a container app having a page-based router. I want the micro-frontends mounted in this container app to be able to listen to and update search parameters in url, as they will store their state there. Is there a way for them to do so?...

other-emerald

7/23/2025

Passing data between routes

I am using Tanstack Router and Tanstack Query. Let's say we have a route that does a search. We have a form that accepts "code" as a search input. When the user click search, that value of the code is put into the url as search parameter and this useQuery is enabled. ``` const {data} = useQuery({ queryKey: [{entity: "stocks", scope: "search", code: "<value from code input>"}],...

literary-plum

7/21/2025

notFound data always nested in data.data, and props.data type is unknown

Hello) In defaultNotFoundComponent, props.data is typed as unknown. At runtime, props.data is an object: { data: T, isNotFound: true, routeId: string }. The user-provided data T from return notFound({ data: T }) is unexpectedly nested under props.data.data...

fascinating-indigo

7/21/2025

Custom `create-tsrouter-app` with example

Hey, do the custom examples work on create-tsrouter-app like in next.js? I wanted to create a new app with custom example repo, like in next, but it doesn't seem work work. npx create-tsrouter-app --example <link>

wise-white

7/20/2025

Access Search Params from Head

How do i access SEARCH params from router HEAD func? I dont see any way to get access this -- any help would be appreciated...

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