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

useful-bronze

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

fascinating-indigo

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

absent-sapphire

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

vicious-gold

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

conscious-sapphire

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

rising-crimson

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

robust-apricot

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

fascinating-indigo

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

frozen-sapphire

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?

frozen-sapphire

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?

wise-white

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

flat-fuchsia

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__" });

...

national-gold

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.

extended-salmon

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

protestant-coral

4/25/2025

code splitting file based routing doesn't work for memory history?

1. i try to use autoCodeSplitting: true in vite, it turns out it doesn't work 2. i try to turn off autoCodeSplitting: false then suffix all route with .lazy.tsx, like from "features.tsx to features.lazy.tsx,still doesn't work 3. i try to make it into 2 files, from features.tsx tofeatures/index.tsx and features/index.lazy.tsx 4. i also try to use lazy component: lazy(() =>import("./index.lazy").then((mod) => ({ default: mod.BlogAds }))), still doesn't work ...

fascinating-indigo

4/24/2025

Link component not needing params for a dynamic route and working correctly!

Hi. I'm working on a code that renders different sidebar content based on the current route and for that I have the code below. The issue is that I'm using a dynamic Link but without passing a params object to it, but the routing still works. The "To" prop only has the string "/$xyz" and somehow it works! I'm confused on why this is not throwing any errors and is actually routing correctly as from my limited understanding it should not work without passing params. Are the params being inferred here somehow? import { Link, useMatches } from '@tanstack/react-router'...

future-harlequin

4/24/2025

Route typesafety isn't working

All of a sudden I stopped getting any route type safety, I can't see anything that would cause this? Is there any documentation or files I should be checking? Just plain tanstack router...

stormy-gold

4/24/2025

masked subroute in file based routing

i have an / (index.tsx) route in my tanstack start project. i want to set up a masked route, something like /filters or /?show_filters that shows the filter drawer. however, i want to mask the route. https://tanstack.com/router/latest/docs/framework/react/guide/route-masking i can't seem to figure out how to set it up as a sub route (index.filters.tsx has router set the path to /index/filters)...

sunny-green

4/24/2025

invalidate data in router context

Hi, I have data loaded and added to the router context to make it available on all pages ``` beforeLoad: async ({ context: { queryClient } }) => ({...

magic-amber

4/23/2025

Is it possible to render the notFoundComponent inside of my auth only layout?

Please take a look at this adjusted kitchen sink example: https://stackblitz.com/edit/tanstack-router-mg97mijn?file=src%2Froutes%2F__root.tsx My app has a setup like this: - _auth folder for routes only visible after login which has the navbar in the layoutless route - _login folder for routes only visible before login which has the login page layout in the layoutless route ...

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