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
Possible to use multiple routeTree.gen.ts files?
Hello,
Has anyone used mutliple client side routers in one vite project before? Maybe im approaching this the wrong way, but I have a MPA that I would love to be able to have each page in my MPA have its own SPA client side router. I set up my vite config like this:
```
plugins: [
TanStackRouterVite({...
Router Integration With Tailwind Catalyst Link Component
I am struggling to get typescript link component working properly with the Tanstack router (I am a beginner when it comes to typescript).
I have updated link.tsx to the following ```import * as Headless from '@headlessui/react'; import React, { forwardRef } from 'react';...
I have updated link.tsx to the following ```import * as Headless from '@headlessui/react'; import React, { forwardRef } from 'react';...
When to use `useRouter` vs importing router instance
As far as I can tell there's not a clear reason in the docs to prefer one or the other.
This discussion mentions importing when using the hook can't be done, but it also suggests
InnerWrap as a workaround: https://github.com/TanStack/router/discussions/2978
The docs on the other hand call out that importing the router everywhere can lead to increased bundle size: https://tanstack.com/router/latest/docs/framework/react/decisions-on-dx#2-declaring-the-router-instance-for-type-inference...Custom link component params reducer type error
I have this custom link component in order to play nice with tailwind catalyst components:
```typescript
import * as Headless from "@headlessui/react"
import {...
Vite base and Router basepath problems when deploying
Hello,
I have a React 19 (experimental) with Vite (6.3.1) and Tanstack Router (1.121.0-alpha.22) project with a basepath /ui set in both vite.config.ts and createRouter. Everything works fine in dev, but when deploying to Nomad i get the following error:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
...
useRouter must be used inside a <RouterProvider> component!
Running into this issue with the alpha version.
Checked other threads in this server for this, but that all seems to come down to multiple versions of router running, I don't have this afaik. I ran
pnpm dedupe
Should the version of start and router be the same alpha as well? So alpha.22. Or can one be on 23?...Search params in document head?
Is there a way to access the search params in the document head to dynamically change the meta title and meta description?
How to use a skip link?
I'm trying to add a "skip link" to my tanstack router app but when I press the link it scrolls to the right section, but the app sort of flashes dark and scrolls back up.
...
<a href={`#${props.topic.anchor}`}>{props.children}</a>
<a href={`#${props.topic.anchor}`}>{props.children}</a>
NotFound Error bubbling
I'm finding it really confusing trying to get the error behaviour I'd like. I'd essentially like a unmatched route to fall back to its closest error handler. Most of the time I want to use the base 404 error page like
notFoundMode: 'root' provides. However I'd like to for certain routes handle not found differently. Say someone went to /posts/5 I want to be able to specify an error page on the /posts and have it handle the error in its outlet. For all other outlets though, unless specified it should fall back to the main error handler.
I've no idea where I'm going wrong, I feel like I've tried just about everything but I guess I'm not understanding how error handling works....createFileRoute removed on save
Trying to migrate from Next.js, running the alpha. Running into two issues with file based routing:
1. No
createFileRoute being inserted in existing files
2. With new files, createFileRoute is added, but when saving the createFileRoute import is removed
...api routes in solid start
Hi, is it possible to create an api route in solid start with tanstack router? when i add api folder with firebase-handler.ts i get populated with import { createFileRoute } from '@tanstack/solid-router'
export const Route = createFileRoute('/api/firebase-handler')({
component: RouteComponent,
})...
Query State issues
Error: "Maximum update depth exceeded" when clicking the Select dropdown in TanStack Router. Works fine in React Router using nuqs. How to properly update search params without infinite re-renders?
```tsx
// Route component
const searchSchema = z.object({...
Smooth Route Transitions in TanStack Router
Hey everyone! I'm working on a chat application with TanStack Router and struggling with achieving smooth transitions between routes without unwanted remounting. Here's my situation:
Current Route Structure:
```
typescript// Three main routes:
/(app)/chat/ // Chat index/landing page...
Scroll to top behaviour in a shadow DOM
Hello 👋
I am trying to make the
scrollToTopSelectors router option work in my app but without success.
I tracked it down the fact that my selector points to an element that is inside a shadow DOM (because we are using a micro-frontend architecture and the micro-frontend is responsible for the scroll), thus document.querySelector resolves to null (code)...Understanding context selector performance impact
Hi! I'm debugging some performance issues and I'd like to understand why A performs worse than B?
```ts
// A. use selector
const { queryOptions } = Route.useRouteContext({
select: (context) => ({...
Trying to use ValidateLinkOptions in a dynamic menu structure is proving difficult - any tips?
I'm trying to create a dynamic menu in an array like this:
```[
{
label: __("Events"),
icon: IconEvents,...
how to run something before content is shown?
Is there a way to run some code that can throw a redirect before a page is shown?
I tried with the beforeload but its triggering on hover, i need when entering the page (before effects in page run) to trigger a redirect in some scenarios, is that possible?
i also tried onEnter but it executes before the effects, i need something like a beforeEnter i think...
How to develop with https in localhost in tanstack/start ?
im using the vite ssl plugin, but im getting this error, not sure it is the correct way
Not Found Components not working as expected
Hey there,
i need some help with my NotFoundComponents. Somehow every route renders only the default not found component. Instead of the parent NotFoundComponent.
```export const Route = createFileRoute("/_auth/_district-manager")({
component: DistrictManagerLayout,...
Translating Routes
is it possible to translate the routes in filebased routing?
I have a /search route which should be /suche when the user selects that he is german....