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

conscious-sapphire

9/1/2025

custom metadata field on createFileRoute

hello tanstack, I'm working on a project where I'd like to generate clickable previews for different pages based on metadata from the file system routing. essentially, i'd like to have an app name, an icon, and perhaps a description for use in a launcher for internal apps at work. Is there a way to define this inside the createFileRoute? By using the head property, i can add certain metadata and introspect it at build time by reading the generated routeTree object, but this will end up inserting it into my html. Is there a better place to define build time metadata associated with a route? Or a way to extend my router to enable this in a type safe way? I've attached 2 screenshots of how i'm reading / writing to the head property currently...

wee-brown

8/31/2025

How to know when viewTransition is finished?

I am using viewTransition property. I neefd to fire animation when viewTransition is finished.

exotic-emerald

8/30/2025

Type safe create url

Hello guys, I need to create a type-safe recovery password email with a token as URL search params. I would like to have a function that generates that URL like a Link component, but I haven’t found anything. I created this utility function to solve the problem, but it would be great if the router provided something like this. ```...

afraid-scarlet

8/29/2025

Why use `beforeLoad()` to handle breadcrumbs? Shouldn't we use `context()` instead?

I've seen everywhere examples where "static" data attached to the route is handled by returning value from beforeLoad, but looking at intellisense there's a context() => any function available which seems to be made for that. why even the docs don't use it? is it for another purpose?

foreign-sapphire

8/28/2025

Tanstack/router: Unable to generate route tree file

Does anyone have an idea about https://github.com/TanStack/router/issues/4912 please ?

sunny-green

8/28/2025

Export variable is not defined in "ssr.mjs"

Having a lot of trouble getting my docker build to run successfully, using turbo repo. Build works locally, I've got a couple of internal packages I'm importing but they all seem accounted for The error: ```...

national-gold

8/28/2025

Reference of `navigate` now changes before navigation. Is this intended?

Since version 1.131.28 (latest as of now) if you have this kind of code: ```ts function RouteComponent() { const navigate = Route.useNavigate()...

extended-salmon

8/28/2025

prefetchQuery vs ensureQueryData in SSR

Can someone explain the difference to me of these four? ``` loader: ({ context }) => { // 1. prefetch without await...

optimistic-gold

8/28/2025

What is the correct way to set up these routes with a layout ?

Hi, I have a route called vadashboard and that route also has a _layout hierarchy goes as: ``` routes/ ├── vadashboard.tsx (Main route - client selector page) ├── vadashboard/...

xenial-black

8/27/2025

Layouts in FileRoutes

What I am missing? I want to setup so the component in __root is wrapping the one in index.tsx, for example. Basically how +layout works in svelte....

plain-purple

8/26/2025

Storing a list of urls to be navigated through later

I'm looking for a bit of direction on how to store a list of, ideally, typesafe locations that I can fetch and navigate through. Worst case scenario I just serialize entire LinkProps objects and disable type checking for the line but I imagine there's a better way. I checked all the functions being exported and none of them seemed like they fit the bill, but it must exist where the lib parses the window href into matchable json For context this is a react SPA with no ssr...

conscious-sapphire

8/26/2025

Multilingual URLs

Hey everyone.. Where I work we have a requirement for bilingual URLs (for example /en/about and /fr/a-propos). How easy/difficult would something like this be to implement in TanStack Router? Obviously, the ideal implementation would be a single .tsx file per route, where /en/about and /fr/a-propos both point to (for example) about.tsx. We've successfully implemented this in RRv7, along with a supporting <Link> component that will render the correct URL path depending on the current locale.. but I'd like to explore TanStack Router for new projects....

rare-sapphire

8/26/2025

SingleSPA MFE React Router issue (advise for migration to TanStack Router)

We are encountering issues with React Router and are considering a switch to TanStack Router. The core driver for the migration thoughts is a <Router> inside <Router> error, which feels pretty unavoidable in our SingleSPA, React 19 Micro-Frontend setup with components being exported from one MFE app and used in other MFE apps. The fact that the component is exported from a JS file that also has the lifecycle functions required for the main MFE app trips up React Router 7 and starts throwing an exception. Now, before we hop onto the migration train, does TanStack Router have similar restrictions, such as non-nestable BrowserRouter wrappers, or is it expected to work well with each MFE having its own inner routing and singleSPA orchestrating the MFE's main routes that determine when the mount and unmount of these apps occur? Does anyone have any experience with SingleSpa and TanStack Router that could share some tips?...

ratty-blush

8/26/2025

Custom Template for File Based Routing?

Is there a way to define what the generated route.tsx / index.tsx file will contain when it is created?

adverse-sapphire

8/25/2025

Catch all route for showing a modal over existing pages

I use TanStack router folder method (not programmatically). I have the following scenario, I have core routes: /home, /settings, /settings/preferences - as you can see - also deep nested routes. But I might have many core ones. ...

extended-salmon

8/25/2025

Error while using useNavigate hook with react router

Hello guys,I am building a project while learning context api in react js. I have put all my variables and functions in AppContext.jsx, so they can be accessed and manipulated by component according to the need. But in some part of AppContext.jsx , I have used useNavigate hook (which must be used under Router, according to docs) is giving error that "useNavigate() may be used only in the context of a <Router> component ". I don't know how to solve this error, please help me out in this....

adverse-sapphire

8/23/2025

Dev workflow for building a pendingComponent?

How do you go about building your pendingComponent? I change pendingComponent to component whilst im developing / designing the loading state, then change it back to pendingComponent when I'm happy. I'm wondering if im missing something obvious?

generous-apricot

8/23/2025

errorComponent not rendering

Hi Guys. Hope you are all good. I have a notFoundComponent and errorComponent defined for a layout with some child routes defined in route.tsx. The notFoundComponent is getting rendered correctly when a route is not found but when an error occurs within those child routes, instead of rendering errorComponent, it's rendering defaultErrorComponent defined in router.tsx which is not the behavior I am expecting. Is this the correct behavior or I am missing something?...

absent-sapphire

8/22/2025

How to handle notFound errors based on route param validation?

I have a lot of routes like /posts/$postId where I essentially just call a server function to get the relevant post: ```ts // route export const Route = createFileRoute("/posts/$postId")({...

deep-jade

8/22/2025

React RSC in Router

The React Router folks announced that they will support RSC in both Framework and Data Mode (https://remix.run/blog/react-router-and-react-server-components). Will Tanstack similarly support RSC in their equivalent "modes" Tanstack Start and Tanstack Router (which alone is much like Data Mode).

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