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
Identifying source of notFoundError
I’m certain I’m just overlooking something obvious, but I was going mildly crazy this week when my console logs were showing “Warning: notFoundError was encountered on the route with ID “root” …
I couldn’t figure out what was causing it. Was it a missing favicon.ico being requested by the browser? Nope. Was it a tab I had open in one of many windows that was pointed to a route that no longer existed and was reloading itself for some reason? Nope. Nothing showing as 404 in Chrome dev tools either.
Anyway, eventually figured out that it was Chrome Dev Tools looking for a devtools.json file (and that request does not actually show in the dev tools network tab)....
Breadcrumbs: Prevent Router Context From Being Inherited
I'm building breadcrumbs that's using the Router Context guide from the official docs. The issue I'm having is that a Router context in a descendant route is inherited from the parent route, and it's resulting in duplicate breadcrumbs.
Is there a way to prevent this default behavior other than just filtering and checking for duplicates?
```tsx...
Multiple table search params
How should I handle multiple independent table search params on a single page (some synced to URL, some not)?
I have a page with 5 different tables. Each table has its own filters, sorting, and pagination. Some of these tables should sync their state (e.g. page number, filters) to the URL via search params, while others should keep state internally without touching the URL.
I read through this TanStack blog post https://tanstack.com/blog/search-params-are-state, which is helpful conceptually, but it doesn’t make it clear how to handle multiple independent state slices that may or may not persist to the URL....
Mobile: Docs: bottom two sidebar entries are un-tappable on iOS safari
It works fine on iOS Chrome, but on iOS safari, I cannot click the bottom 2 entries of the sidebar, in Docs, for any TanStack docs product
Fetching data in the page loader using an ID stored in localStorage
Hi guys ! đź‘‹
First, i'm sorry if a similar question has already been asked, there a lot of posts and i couldn't find one related.
Here is the context of my app:
- It's a school management app for students, professor and administrator...
Navigation resets current page instead of navigating
Anybody experienced an issue where calls to navigate() just reset the current route (ie search params go blank) on the current page instead of navigating you to the new one?
After upgrading from 1.92 to 1.120 our app is experiencing this issue on a couple pages. Stepping through, TSR seems to commit the new location correctly, but the current page just resets after
It’s probably something in our app rather than TSR but thought I’d ask anyway...
Loader and interceptors
Hi guys, I've encountered an unexpected behavior (at least for me) when using TanStack Router.
When I make an asynchronous call to an API inside a loader, and the API responds with a 401 Unauthorized due to an expired access token, I expect my Axios interceptors to handle this (as they do correctly with useQuery, useMutation, etc.).
However, it seems that the error is caught by the router’s error handling mechanism before the interceptor has a chance to process it. As a result, logic such as token refreshing, user sign-out, or redirecting doesn’t happen.
Is this expected behavior? If so, is there a recommended pattern to allow Axios interceptors to work correctly with loader-based API calls?...
tanstack query as a cache
Hi, I am using tanstack query instead of default router cache. Example from docs is using:
```
// Since we're using React Query, we don't want loader calls to ever be stale
// This will ensure that the loader is always called when the route is preloaded or visited
defaultPreloadStaleTime: 0,...
Subscribe to router’s global blocking state
Hey đź‘‹
Is there a way to subscribe to TanStack Router’s global blocking state?
Use-case...
Using router in a dynamic subpath, recieving page not found
I'm trying to host a static app on either
/ & /subpath
I've tried all combinations of setting the basePath on the router & in vite to "", "./" & "/" , the app does load however we first hit a page not found , navigating to / works from within the app but / should be /subpath
Express
```ts...layout component render while beforeLoad is still executing
repro url
https://stackblitz.com/edit/tanstack-router-grysknq6?file=src%2Froutes%2F_auth%2Froute.tsx
steps
1. click on logout...
How to handle modals (query params, or <outlet />
Hi, I am coming from Next js and how we used to handle modals by using Nuqs package (query params) - so that modals can persist in the url.
However, i am not sure if this is possible with tanstack router.
Do you have any experience in how u render your modals?...
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>