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

quickest-silver

5/5/2025

i18n Routing - Question

Hello I would like to add i18n support to my TanStack Start app I was hoping to support website.com/my/path (english)...

optimistic-gold

5/5/2025

How would you make chatgpt.com ?

The index page has chat-box + options, center screen. When you send a message, the chat-box animates downward (the contents are gone, but any options are still selected) and the original contents are displayed as a message. The URL changes to reflect the uuid e.g, /<uuid> and a loading dot appears where the message will be streamed in. Right now, I'm struggling with how the chat box animates, message is kept up, URL changes, and the state is maintained even though different files are being pr...

fascinating-indigo

5/4/2025

routeRules inject header

I'd like to proxy all requests to an API but inject a header into the real API request. I know routeRules exist, but I can't inject a header in there. Is there any easy way in Router/Start to do something like this?

ratty-blush

5/4/2025

Error in renderToPipeableStream: ReferenceError: exports is not defined

Hi, I having problems importing a compiled package with turborepo.

optimistic-gold

5/4/2025

root.tsx vs main.tsx

How do I decide what to put in src/main.tsx vs src/routes/__root.tsx? I am using Zustand, TS Query and Router, and ShadCN. I don't know where I should setup Zustand and TS Query or where I should put my sidebar....

rising-crimson

5/3/2025

Layouts in file-based routing: can they be nested inside folders?

Hi! I have a question about TanStack Router and file-based routing. If I use file-based routing, do layouts always have to live at the root of the /routes folder? For example, in Next.js, you can organize files like this:...

quickest-silver

5/3/2025

Seeking guidance on design system package extraction and encapsulation with TanStack Router

I’m integrating Catalyst UI (Headless UI + TailwindCSS, docs) into a React app using TanStack Router, and trying to preserve both design system encapsulation and router-aware type safety goodies at the point of use. Context - I’m extracting our UI kit into a pnpm workspace package, which should remain agnostic to TanStack Router (and unaware of the router instance)....

eager-peach

5/3/2025

Question on pathless layout vs route groups

I'm trying to understand the differences between these 2 features of Tanstack route and why should I use one over the other? They both seem to achieve the same results. Pathless layout ``` routes/ ...

eastern-cyan

5/2/2025

Using dollar sign in path param?

I need a URL to include a literal dollar sign, so the URL should be /currency/$ and the $ should not represent a parameter/variable but just a plain string. I'm using the file based router. Is there a way to escape the dollar sign?

national-gold

5/2/2025

How to change pendingComponent behavior?

Hi everyone, I'm working with the TanStack Router and trying to utilize the pendingComponent feature. I want it to display only during the initial page load when navigating to a new route, but currently, it shows up every time a query within the loaded component is triggered. Does anyone know how to restrict the pendingComponent so that it only shows during route transitions and not during subsequent query calls in the component? Any guidance or examples would be greatly appreciated!...

fascinating-indigo

5/2/2025

Type error in `params.parse` callback with a route that include a path param

I have a file src/routes/_restricted/projects/$projectId.content.tsx with this code : ```typescript import { createFileRoute } from "@tanstack/react-router"; ...

ambitious-aqua

5/2/2025

How can I make a list of urls type-safe with TanStack Router in a custom Header component?

Hi! I’ve read the Custom Link guide and successfully created a custom link using TanStack Router. I also have a <Header> component that takes a list of links like this: ```typescript...

overseas-lavender

5/2/2025

Issues With Outlet & Layouts

I have a page that is supposed to display the Tabs, and then also automatically open a table. Unfortunately in the redirect, the Tabs are not displayed Instead it just displays the temporary Board Page I made....

extended-salmon

5/1/2025

How to use tsr watch with other commands in npm scripts?

In the guide stated to update npm scripts to use tsr. While I don't see any troubles with build script, I don't understand how dev script supposed to work. ```json { "scripts": {...

passive-yellow

5/1/2025

useSearchParam custom hook: looking for advice

I'm working on a custom hook useSearchParam which would operate like a useState, but update the search params on change with optional debounce. I'm looking for the right way to use the built in type-safety for searchParams. But I can't seem to find any way to make it work by passing the Route, RouteContext, searchParams object or anything else from the Route without running into absolute Typescript nightmares. Current solution: use the inferred type from my Zod schema that's already validating searchParams as a generic that's passed to the hook. It works, but it feels like I'm not using the router as intended....

xenial-black

5/1/2025

Uncaught Promise (null)

On my production deployment I'm seeing an uncaught error due to null - Struggling to find where this might be coming from - looking at the source in the browser it's pointing to my index.html (dashboard:1). Any suggestions on things to look at that I might've misconfigured?...

xenial-black

5/1/2025

How do I solve this typescript error in Link object?

My linter is throwing a fit over this and I'm unsure what's wrong... based off the docs it looks correct to me! ``` Object literal may only specify known properties, and 'projectId' does not exist in type 'ParamsReducerFn<RouterCore<AnyRoute, "never", false, RouterHistory, Record<string, any>>, "PATH", string, "/projects/$projectId">'.ts(2353) link.d.ts(121, 5): The expected type comes from property 'params' which is declared here on type 'IntrinsicAttributes & LinkComponentReactProps<"a"> & RequiredToOptions<RouterCore<AnyRoute, "never", false, RouterHistory, Record<...>>, string, "/projects/$projectId"> & ... 7 more ... & LinkPropsChildren'...

optimistic-gold

5/1/2025

Using beforeLoad for authentication routes while keeping route layout

I have a simple authentication checker for a route, like so: ```ts export const checkAuthentication = (opts: {user: ApplicationUser}) => { ......

conscious-sapphire

4/30/2025

Automatic Code Splitting

Hello, i would like to know if automatic code splitting works only with files named route.tsx or it's available for all routable file in our routes directory. ``` Encapsulating a route's files into a directory Since TanStack Router's file-based routing system is designed to support both flat and nested file structures, it's possible to encapsulate a route's files into a single directory without any additional configuration. ...

wise-white

4/30/2025

Is pending component on root known to not work?

We have a loader defined on our createRootRouteWithContext route, and were wondering, why the there defined pendingComponent isn't used, but the defaultPendingComponent, defined on the router is used instead. Anyone else having this issue, or is this a known limitation?...

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