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
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")({...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).
Virtual physical routes
In virtual routes
physical('/posts', 'posts'),
```
└── posts
├── route.tsx (layout file not working)
├── index.tsx...Router Plugin question
Hi all,
I have a situation where I need to rename my async chunks generated from the tanstack router plugin for auto code splitting. I want to protect certain JS chunks on my backend auth via regex/name compared against the manifest, but they seem to be created as ‘[tinyint].[hash].js’, so they lose their nomenclature. I ideally would like to factor in the route name into it so like ‘[route-name].[hash].js’.
I’m leveraging Rsbuild currently. Is my only option to opt out of auto code splitting and to manage it out of rsbuild/rspack, or is this configurable via the plugin config? I tried to peek into the package on GitHub but I was sort of getting lost in the overhead....
search params appear in `_strictSearch` but not in `search`
Im encountering a problem where my search params show up in the URL as expected, but wont be available using
Route.useSearch().
Using the devtools i can see that they appear in the parent routes search, but only appear in the /page route under _strictSearch. Anyone knows how this could happen?
```ts
export const Route = createFileRoute(...
Errors thrown in `loaderDeps` result in a blank page
It seems that the return value of
validateSearch gets re-merged back into the URL, which wasn’t clear in the docs. This isn’t the behaviour I prefer; I never really want to change what the user wrote.
Therefore, I’m trying to do validation in loaderDeps, but I found that throw-ing in loaderDeps results in a blank white page with nothing being output to the console. The onError handler does not get invoked. The exception gets completely swallowed. This can’t be the right behaviour?...TanStack Router vs Chicane
Hi everyone, wondering if I can get some advice…
I’m building a single page application but want a few pages to be pre-rendered (SSG not SSR). I’ve been using TanStack Router so far, but I can’t help feeling like it’s too heavyweight / too much magic (e.g route tree gen).
Reading the docs I saw that TanStack Router was inspired by Chicane, and having looked at Chicane it appears to be just what I need if combined with SWR or TanStack Query. Can anyone point me in the right direction for getting SSG working with Chicane?...
How do you handle two versions of an application?
I'm working on the UI of an opensource backup software using among other things tanstack router, react and vite. We want to create a commercial version of the UI which has 1/ the same routes with different contents and 2/ more routes, only available for the commercial release.
For 1/, I can simply rely on a feature flag and on dead code elimination to have a different build between the commercial and the OSS versions.
However, what's the best way for 2/?...
Best way to structure /auth layout with shared Lottie animation
Hi everyone 👋
I have three forms in my app: login, send OTP, and verify OTP.
I want to show them on three separate pages:
• /auth/send-otp...
Is it possible to have subdomains using Tanstack Router?
Hi
Is it possible to have subdomains using Tanstack Router? Or do I need to switch to Tanstack Start and handle redirects in the middleware?...
DDD routing pattern in monorepo
hi I want to achieve this type of routing in a monorepo (nx.dev) using tanstack router with file based routing
```
my-app/
├── apps/
│ └── web/ # Main app (thin shell)...
Control `shouldReload` from navigate
In my app, I need that if a user is already on a route, clicking on a button or in general triggering a navigation towards that same route won't do anything (no pending component, no loader re-run).
I did that by setting to
false the shouldReload property on the createFileRoute call (bonus related question: is there a way to set it on the root route, like defaultShouldReload instead of repeating on every route?).
This approach works just fine, but now I need to handle the user log in....Errors in deployment after migrations
For some reason, after upgrading from using Vinxi to Nitro in TanStack Start, I'm unable to view my deployed site. The build output files are structured in a way that Coolify or Vercel no longer understands.
What if I want a layout route named “`index`”?
If the file
posts.index.tsx has been made to mean /posts/ and not /posts/index then how can layout route /posts/index be accomplished? Can this be done without changing the indexToken config option away from “index”?
* posts.index.tsx -> /posts/
* posts.[index].tsx -> /posts/[index]
* posts.index.route.tsx -> /posts/...Techniques for reducing request waterfalls for dependent queries in loaders
I'm using TanStack Router, Query, and Start (though I think Start is irrelevant for this Q)
I'm wondering about loaders that are run for client-side transitions that would be run more effectively on the server-side. Consider the following:
```ts...
Is it possible to create a type of a subset of the routes for LinkOptions?
Lets say we have these routes
```
/inbox
/inbox/$emailId
/clients...
Safe way to use the createRouter singleton without circular imports?
Hey all! Quick question, in a React + Vite app, is the
router singleton (from createRouter) actually meant to be imported and used anywhere in the app?
I’ve noticed that it can easily cause circular import issues — the singleton imports the route tree and the route tree is importing the page definitions (component). If a page then imports the singleton, it loops back and causes problems.
Has anyone figured out the recommended way to use the router instance without running into these circular imports?...Auth best practice: middleware or root beforeload?
I am just curious what people prefer and why they think it is better than the other.
Accessing context in route `head`
Is there a specific reason you can not access the route context in a route
head?
I am passing my i18n context from the root, and it would be nice to be able to use it there to I can call i18n._("This page title")...Any idea why "Loading" text is not shown instantly in the following example? Video attached.
```ts
export const Route = createFileRoute('/_authed/posts')({
loader: () => fetchPosts(),
component: PostsComponent,
pendingComponent: () => <div>Loading...</div>,...