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

provincial-silver

11/18/2024

rerender test

Hey there, currently the tanstack router does not seem to support testing rerender of hooks from: import { renderHook } from '@testing-library/react' I made a PR/fix https://github.com/TanStack/router/pull/2796 ...

unwilling-turquoise

11/17/2024

npx tsr doesn't generate `index.ts` route

I've followed the TanStack Start guide, and I'm about to create the second route in addition to __root.tsx, namely the index.ts route. When Vinxi is running, when I create the index.ts file, it is automatically populated with the following: ```ts import * as React from 'react' import { createFileRoute } from '@tanstack/react-router' ...

rising-crimson

11/16/2024

validate search params using Valibot Error

Hello, I have followed the documentation here (https://tanstack.com/router/latest/docs/framework/react/guide/search-params#valibot) for validating search params using valibot. However I got some error saying that the type doesn't match. Does anyone know how to solve this? Thanks in advance! Here's my code: ```ts const AuthErrorSearchSchema = object({...

correct-apricot

11/15/2024

defaultPendingMs and defaultPendingMinMs weird behavior.

Hi everyone, I’m encountering an issue that seems like a bug. I’ll try to break down the issue into two mutually exclusive scenarios. Scenario 1:...

variable-lime

11/15/2024

Best Practice for Directory Structure For File-based?

I'm new to using Routing libraries of any kind, and I'd like to come up with a folder structure in my project that makes the most sense. I'm using file-based routing. My pages will have multiple components in them, of course, and I'd like to keep those components close to the actual page component I'm developing. Putting the Page component and its child components under the routes directory won't work well since Tanstack Router will create a route structure. This is what I'm working with now: ```bash...

adverse-sapphire

11/15/2024

how to make notFoundComponent render outside the outlets.

I've defined a defaultNotFoundComponent as the createRouter config. The router is then passed to the router props of the RouterProvider component which is rendered in the react root. I hope that the defaultNotFoundComponent to render when a url is not matched and I think it should be rendered full-size rather than just in the outlet. I have a series of nav links in the __root.tsx and an Outlet component. The ideal behavior I expect is that when "https://www.domain.com/exits" is visited, the navs and the outlet is rendered correctly, and when "https://www.domain.com/does-not-exists" is visited, the navs and the outlet (as well as anything else in the __root.tsx ) are not rendered but to show only the defaultNotFoundComponent I defined. Was there anything I did wrong? Or it's just I can't achieve that?...

optimistic-gold

11/15/2024

Tanstack start docker deployment

Is it possible to build my tanstack start application as a docker application?

clever-tan

11/14/2024

Link with search param having multiple values for same key

I'd like to provide a search property to my Link component where they query string key can have multiple values (an array)

<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>

<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>

This does work, but the query string in the browser is shown like this:...

exotic-emerald

11/13/2024

Optimize complex searchParams update handling Task

Initial Investigation I started investigating the setTimeout with pendingMs = 0 usage, thinking it could be removed. - The complexity comes from the searchParams update handling logic itself, not from the timeout ...

national-gold

11/13/2024

How to correctly account for space character in search params

Hello, When I use this code to navigate to a page with given search params, it puts "foo+bar" in to the url. Then, when I click back it navigates to "foo%20bar" with the correct encoding for the space character. Am I using navigate incorrectly? How can I make it correctly encode the space? Thanks ...

old-apricot

11/13/2024

Route types not being passed across libraries in a monorepo

I was about to post a question about this but ended up solving it. Posting it anyways in case someone else (or me in the future) run into this issue: I'm exporting the Link component from a router library in a monorepo and importing it in a component lib and now the "to" prop is typed as any. Is there some sort of typescript config or something I need to modify for this to work? The attached photo shows the Link being exported and and example of it working on the left where on the right you can see that the link component isn't type checking. ...

conscious-sapphire

11/13/2024

Render optimizations with loader/deps

Hey, I'm trying to understand the render optimizations with the fine-grained selectors. I noticed that as soon as you add loader deps this breaks. Changing loader deps will re-run the loader with a cause value of enter and everything will re-render. ...

flat-fuchsia

11/13/2024

How to retain only search params of Route

I have two routes where I am using search params for filtering and sorting. The search params between the two routes are completely independent of each other so I would like to only show the search params of the active route in URL while ALSO stripping default params. I'm using the middlewards like so: ```ts search: {...

xenophobic-harlequin

11/13/2024

Create a one-time view page

I'm building an order spa using tanstack router. I have one route (index) and it has lot of forms, sheets, etc after the user fills out the forms and do the payment, I want to push it to another route /confirmation and show the order details. Is there a way to achieve these: - Dont add the confirmation route to the history - Disable the route if the payment is pending (dont allow the user go to the confirmation page) - Avoid using localstorage/sessionstorage/cookies for security policies...

extended-salmon

11/12/2024

Conditional rendering under single route

Hey, Assume I want to have 2+ conditional "screens" rendered per route, is there a more concise way of doing it? My naive solution is something like ...

xenophobic-harlequin

11/12/2024

SidebarProvider error

Hi guys, according to shadcn I need to setup the SidebarProvider, which I do it in the wrap property from tanstack router but it doesn't work. Ref: https://ui.shadcn.com/docs/components/sidebar Is that the right place?...

genetic-orange

11/12/2024

Kitchen Sink Example

`preSearchFilters: [ // Persist (or set as default) the usersView search param // while navigating within or to this route (or it's children!) (search) => ({ ...search,...

stormy-gold

11/11/2024

I can't get the scroll restoration to work on my app. Someone can help me please?

Hello, I am building an App with Tauri, in the frontend I have React with Vite. I added the TanStack router and for now it works pretty good. But I can't make the scroll restoration works and I don't know what else to do. I was looking the SessionStore and I have something like this: ``` {"cached":{"/todayhtml:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":56},"/html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":560},"/feeds/7html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":1904},"/articles/282html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":4400}},"next":{"html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":null,"scrollY":null}}}...

genetic-orange

11/11/2024

Path Param vs Search Param

What is the Tanstack philosophy on when to use path params vs search params? I've seen in some of the examples things like posts.$postId.tsx for a route, but in the file-based kitchen sink dashboard example the code uses searchParams for the userId. Does it basically come down to personal preference or is there a more concrete reasoning for using one or the other? Thanks

metropolitan-bronze

11/11/2024

Declarative expected behavior or issue

Hello, I have the following case: - posts route has search params - use route masking for post details route to hide the search params - search params are persisted when navigating back from post details to posts ...

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