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

helpful-purple

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

plain-purple

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

noble-gold

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

noble-gold

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

unwilling-turquoise

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}) => { ......

ratty-blush

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

complex-teal

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

overseas-lavender

4/30/2025

Is there a way to pre-render certain pages as static without Start?

It's quite weird to say this, but is there a way to pre-render certain pages? I'm working on a new project that (may) require a certain (landing) page to be static. Overall, almost all of the apps do not need to be SSR as it is mainly based on CSR and do not require it, but one or two pages are required to be static. There's another framework that supports what I want exactly: https://reactrouter.com/how-to/pre-rendering#pre-rendering-with-a-spa-fallback I searched docs quite a bit and seems it is not supported by router directly....

rising-crimson

4/30/2025

Automatic Route Tree Generation in ESBuild

Hi guys, beginner to TanStack Router here. I have an app being built with ESBuild and I wanted to setup file-based routing. However, I had troubles getting the automated routeTree generation to work. I tried to follow the steps in CONTRIBUTING.md but I had immediate build failures for the following. ``` - nx run @tanstack/router-generator:build...

ambitious-aqua

4/29/2025

Search Param Zod Schema for array types with a single element?

Hi! I have a zod Schema that I'm using for my search params. Some of the properties I'm using are supposed to be arrays of strings. Ideally, the validation would be as simple as: ```ts...

fascinating-indigo

4/28/2025

Monorepo with multiple routers

I've looked at the monorepo setup, but I'm still not sure how to set things up if i need to have two separate routers, and shared components between them. I'm going to be working with a website and a desktop app which will have some similar features and shared components, but won't be exactly the same. How can I merge the typesafety of multiple routers when creating components? Appreciate any direction that can be given

generous-apricot

4/28/2025

How to hide the app layout on some routes

I am porting our app to @tanstack/router and loving it. There is one niche use-case that I am not able to solve, but I assume this is because I dont use the correct approach. The general layout of our app is defined in routes/__root.tsx similar to this much simplified example: ```tsx <SetupContext>...

other-emerald

4/28/2025

How to Clear Multiple Routes from Navigation History in TanStack Router

Navigation Flow: - Start at /account/networks - navigate({ to: "/account/networks/search" }) - navigate({ to: "/account/networks/search/join-dialog" }) - After success action, we want to return to /account/networks...

ambitious-aqua

4/27/2025

is there anything wrong with wrapping `getRouteApi(...).use<whatever>` in try/catch

i want to be able to generically grab stuff from the url, and the nicest way feels like getting this data from the relevant Route params in my case if you call useParams on a non active route, this throws. any issue with effectively turning this into a result type of <RouteParams, Error>? perf issues, or some footgun i've not considered?...

ratty-blush

4/27/2025

Adding a dot to a route in TS Start

I want to have a heartbeats.bulk endpoint but when I rename my API route file to heartbeats.bulk.ts the route becomes /heartbeats/bulk. How can I go around this?

ratty-blush

4/27/2025

Redirecting /api to homepage

Hey! I'm using TS Router (via Start) and am trying to redirect /api to the homepage. I made a routes/api/index.ts that redirects to /, but it doesn't seem to ever get hit. How can I fix this?

optimistic-gold

4/27/2025

Invariant failed getting loading data in child component.

I am on version 1.16.6, the newest version seems to make some breaking changes. So I have not been able to update yet. I have a parent route: ```ts export const Route = createFileRoute(...

constant-blue

4/26/2025

Search params from layout

Hi, reading search parmas from root route (layout) works

    const navigate = useNavigate({ from: "__root__" });
    const search = useSearch({ from: "__root__" });

    const navigate = useNavigate({ from: "__root__" });
    const search = useSearch({ from: "__root__" });

...

multiple-amethyst

4/25/2025

How to use VSCode breakpoints in code-split route components?

When i try to add a breakpoint to a route component the breakpoint works but it attaches to the SplitComponent which makes it really hard to work with breakpoints in route components.

stormy-gold

4/25/2025

Route preloading causing an infinite loop.

I'm running into an issue with route preloading causing an infinite loop. I'm using tanstack start and have a server function fetchSessionUser() that's used in my root route's beforeLoad to get the current user from supabase. When I hover over a <Link to="/teams/create" />, which is located in /_authed/dashboard (route: _authed/teams/create.tsx) , tanstack tries to preload the /teams/create route, and that seems to trigger the root beforeLoad (and therefore the fetchSessionUser() serverFn) repeatedly, leading to an infinite loop of requests like this in the terminal: ServerFn Request: src_routes_authed_tsx--fetchSessionUser_createServerFn_handler...

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