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
SolidJS and TanStack Router Excessive Rendering Issue
When integrating SolidJS with TanStack Router, there are unexpected rendering behaviors affecting performance. Specifically, the home page renders multiple times on initial load, and enabling
defaultPreload: 'intent' causes continuous re-renders when hovering over links.
Issues Identified
1. Multiple Renders on Home Page Load:
- The home page (/) renders at least four times upon initial navigation....Why Does defaultPreload: 'intent' Fetch Data Again on Click?
Hello, I just wanted to ask if this is normal behavior with
defaultPreload: 'intent'?. When I hover over a link, it preloads the routes, which is the expected behavior. However, when I click the link, it still fetches/loads the route data again. Please check the attached video for a demonstration.Router + Query + Suspense + Deferred data
Hello,
I have a question about using Router + Query + Suspense + deferred data preload
So I want to have a page with a critical data + deferred data (preferrably, multiple ones) while using Tanstack Query.
It seems like the flow should be something like that:...
how to get params strict: false inside beforeLoad and loader?
I need to check in a parent route child params
relative navigation with dynamic source route?
I have a utility that makes the concept of a "Search Route" which basically allows things like modals or other widgets to be tied to a search param.
I have this following function i use to either open or close the route. the goal is basically i want the router to preserve it's current page, but i just want to modify the search params:
```ts
function go(k: string, v?: unknown) {...
How to emulate Next.js app router constraints
Unlike probably most people here, I like next's directory-based routing model and hate remix's file-based routing mode, whether with flat-routes or not
Unfortunately I don't like the rest of Next, so I was wondering if there's any way to emulate its routing using tanstack router's router settings. Basically what I want is:
```
š src/routes/...
How to do non-nested routes with virtual file routes?
The documentation teaches how to make non-nested routes using the file/folder names, but there is no instruction to do the same using virtual file routes
I thought that only the children of a route declared in the first parameter were considered nested, but sibling routes with the same path are still considered children
These two work the same:
```js
export const routes = rootRoute("__root.tsx", [...
Migrating to tanstack Start
Hi all,
Last Monday we launched our SPA with tanstack router + all tanstack suite to prod. We faced SEO issues, basically our SPA is an empty blank page for google crawlers for all the pages. I've tried for 5 days improve the performance etc, nothing works. I think this is because it's highly coupled to our headless CMS.
These are the "crazy things" we do in our SPA fetching data from our CMS
- We fetch feature flags to turn on/off some features.
- We fetch seo meta data for each page to inject it in the header of the document ...
How do I get context set in root route?
```js
interface RouterContext {
player?: ReturnType<typeof usePlayer>
}
...
Breadcrumbs with async loaders in between
I have a following folder structure:
```
routes/
$lang/
_layout/...
Which type provides me all registered TanStack Router routes in my project?
I have created a component that should receive a valid TanStack Router route from my project as a property. Which type provides me with all the available routes so that the property is type-safe?
Example:
```ts
// Should error if route does not exist. ...
Tons of "any" types.
Not even sure how to ask this question. I'm a web dev with ~1 year of experience trying to set up a monorepo and I'm not getting any type data out of the @tanstack/react-router package.
I've basically copied the Monorepo with React Query https://tanstack.com/router/latest/docs/framework/react/examples/router-monorepo-react-query example verbatim. My vite.config.ts, tsconfig, package.json, src/* directory, it's all completely identical.
For some reason, though, nothing coming out of the
@tanstack/react-router package is correctly typed. It's all "any". The import is referencing the correct node module, and other packages are all correctly typed (the QueryClient import works fine, but that comes from the react query package)....Custom comparison method for loaderDeps
Hello, I'm trying to use a search param which serializes to
bigint but I have troubles with loaderDeps: https://stackblitz.com/edit/tanstack-router-pajud2x2?file=src%2Froutes%2F__root.tsx&preset=node (click on About in nav)
Do not know how to serialize a BigIntI see that the error is coming from the
loaderDeps implementation which tries to JSON.stringify the search object. Is there a way to customize this behavior?...Redirect to same route
When I try to redirect to the same route with a new
search object it doesn't keep the search parameter from the redirect. I have tried with my mask and without it.
```ts
beforeLoad: async ({ search }) => {
console.log({ beforeLoad: search });...How do I debug route tree generation errors?
I'm getting this route generation error whenever I tried to save a new route file:
...
Error: expected identifier to be present
at file:///home/user/project-name/node_modules/@tanstack/router-generator/dist/esm/generator.js:152:19
Error: expected identifier to be present
at file:///home/user/project-name/node_modules/@tanstack/router-generator/dist/esm/generator.js:152:19
Storing state in search params
Hi everyone. I have a non-controlled search input with a default value from useSearch(). The input has a debounced onChange handler that takes the final value and pushes it to the search params using useNavigate(). My issue is, the entire layout rerenders when I update the search params and the input loses focus which is not a good experience. The alternative would be to add a submit button and let the user click that when they are done typing but I'd like to know if there's a way avoid that.
Also, I noticed that on wrapping the navigate() in a startTransition, 'isTransitioning' is never true. The navigation just happens silently and my loading spinner inside the search input never triggers....
Also, I noticed that on wrapping the navigate() in a startTransition, 'isTransitioning' is never true. The navigation just happens silently and my loading spinner inside the search input never triggers....
Could not find match for from: /pardavejai/$publicFreelancerProfileName/ or basically any link
Hey, I recently migrated to tanstack-router, I use Vite file based routing with React and have a general setup like in the image.
The problem is that any Link I click - via useNavigate or Link component I get dozens of these console warnings for any click I make, even though I seem to have everything set up correctly, the Link's to props are type-checked, I pass in the params and I use the auto-generated from file names paths. I get redirected to the route - just with a lot of warnings.
What could possibly be causing this? How could I fix this?...
retainSearchParams
How does retainSearchParams actually work?
When i have routes /tasks and /tasks/$taskId
If i go from /tasks to /tasks/123 u want to retain search params, but it actually doesn't. how come?...
Problem with navigating to same route
After updating the
@tanstack/react-routerfrom version 1.120.13 to version 1.121.34 I have a problem when trying to navigate using to: '.' option in navigate from useNavigate (for Link component works the same). From what I've been able to determine, the router tries to redirect to basepath after calling navigate with to : '.'.
I found that this issue was related to that but it doesnt resolve my problem https://github.com/TanStack/router/pull/4472.
I prepare some demo to show the problem. To reproduce the issue go to Map and click on button open panel it than redirect you to the index route.
https://codesandbox.io/p/sandbox/tanstack-router-bug-example-j4qlpj...