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

stormy-gold

8/5/2025

Router defining root route as parent route for all file routes

Is there any known reason/quick fix as to why when I create new file routes with nested routes in them it would default the parent route to be the root route rather than the immediate parent route? Is that something I have to configure? For example, I have sales/invoices, sales/invoices/new, sales/invoices/$invoiceId...

fair-rose

8/5/2025

Breadcrumbs solution requiring 3 files per component?!

I created a working bizarre solution for breadcrumbs, see live minimal example: https://stackblitz.com/edit/tanstack-router-y2cazlrs?file=src%2Froutes%2Fsettings%2Fall-users%2Fedit%2F%24id%2Findex.lazy.tsx,src%2Froutes%2Fsettings%2Fall-users%2Fedit%2F%24id%2Findex.tsx,src%2Froutes%2F__root.tsx,src%2Froutes%2Fsettings%2Fall-users%2Findex.tsx,src%2Froutes%2Fsettings%2Fall-users%2Froute.tsx,src%2Froutes%2Fsettings%2Fall-users%2Fedit%2F%24id%2Froute.tsx,src%2Froutes%2Fsettings%2Fall-users%2Findex.lazy.tsx,src%2Fmain.tsx however in order to support lazy loading, static data, beforeLoad for crumb title and using the Matches pattern in official example I had to have 3 files per route. Any other more reasonable solution made something break. What am i doing wrong? how can i bring this down to 2 files per component?...

stormy-gold

8/3/2025

Redirecting /admin/ to /admin/displays

Hi guys, quick question, but first a bit of context. I'm using admin.tsx as a layout route. admin.index.tsx is just a placeholder since the real entry point for /admin is admin.displays.tsx. I want to redirect /admin/ to /admin/display. Is it okay to just add a loader in admin.index.tsx for the redirect, or is there a cleaner way to handle this in TanStack Router? ```...

wise-white

8/3/2025

Tanstack Start using solid and Tauri

Tauri only support spa mode. My vite plugin, ``` plugins: [ tsConfigPaths(),...

absent-sapphire

8/2/2025

`template2 is not a function` in modified examples/solidjs/start-basic-static

repro: https://github.com/0x723b/tanstack-start-solid-test

frail-apricot

8/1/2025

`loader` runs on every transition despite `loaderDeps` usage

Hey all 👋 Can someone help clarify how the loader in TanStack Router works? From what I’ve observed, it seems to run on every successful route transition — even when only a minor search param changes. I tried using loaderDeps, which I assumed would act as the dependency list for when the loader should re-run, but it still re-executes on every change. ...

rare-sapphire

7/31/2025

Search-Typing issue

Hey 👋🏽 . I love tanstack router. Does somebody know why following works: ```ts import { createFileRoute } from "@tanstack/react-router";...

abundant-blush

7/31/2025

Google Tag Manager

Did someone manage to add Google Tag Manager on his Router/Start application?

frozen-sapphire

7/31/2025

How to infer the type of Route component with the context of it?

Let's say I have this component: ``` import { createFileRoute } from "@tanstack/react-router"; ...

foreign-sapphire

7/31/2025

createRootRouterWithContext Interface cannot be Named Type Issue

Heylo, I've tried implementing createRootRouterWithContext with an interface, but I run into the following issue when defining my router:

Exported variable 'router' has or is using name 'MyRouterContext' from external module "../routes/__root" but cannot be named. (ts 4023)

Exported variable 'router' has or is using name 'MyRouterContext' from external module "../routes/__root" but cannot be named. (ts 4023)

...

xenial-black

7/30/2025

Is it okay to use `CatchBoundary` component as a generic error boundary component?

Referring to https://tanstack.com/router/v1/docs/framework/react/api/router/catchBoundaryComponent I'll eventually be setting up Sentry to use their error boundary in most cases, but for cases where I'm handling known errors, I was wondering if CatchBoundary is safe to use as opposed to using something like react-error-boundary...

subsequent-cyan

7/30/2025

@tanstack/react-router streaming ssr

Hello, Im trying out this example https://github.com/TanStack/router/blob/main/examples/react/basic-ssr-streaming-file-based/vite.config.ts my question is it necessary to build for both client and server? and why is this happening?...

unwilling-turquoise

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:...

constant-blue

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....

exotic-emerald

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'

...

wee-brown

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 ...

absent-sapphire

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?...

exotic-emerald

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">

...

national-gold

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<{...

sensitive-blue

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() {...

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