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

deep-jade

7/12/2024

Layout for dynamic params

I'm trying to get a route layout to match two dynamics params pages, I'm trying creating a _layoute.tsx page inside the outer $id params but it doesn't seems working /search $id _layoute.tsx...

fair-rose

7/12/2024

Need to refresh manually when using tailwind with rsbuild

"I am encountering an issue while using Tailwind with Rsbuild. Whenever I make changes to the code, I find myself needing to manually refresh the page for the modifications to take effect."ind with rsbuild, when i trying to make a change in code i need to refresh the page manually to make the changes happen

national-gold

7/11/2024

Infinite rerenders with preload of 'intent' on data table

Im trying to wrap my head around this problem. I'm noticing the preload of the link component is preventing the page from navigating and causing infinite rerenders on the data table cells. if i turn off pre loading it navigates. If i set a staletime on the query being passed it manually to the query, i still have this problem. Is useSuspenseQuery the problem here, always being called? i am sure this is a skill issue on my end ...

stormy-gold

7/11/2024

List-Detail Layout with Path Params

I am struggling a bit with this conceptually. I think once I see the pattern, its going to help me out a lot. I am trying to make this a list detail view using a sub_layout (_layout). So the root layout is just an outlet that I can feed other page layouts into. Anyway, I want a sidebar nav that lists the pokemons and then the details page renders in the main element adjacent to the sidebar. How do I structure this accordingly? https://stackblitz.com/edit/tanstack-router-dyxcm6?file=src%2Froutes%2F__root.tsx...

flat-fuchsia

7/10/2024

Undefined context with useRouteContext

Hi ! I have an issue with the useRouteContext hook coupled with validateSearch in a nested route that throw an error in a specific situation. In my application, there is an _auth route that ensure, in the beforeLoad method, that the user is logged in, returns his account's information if he is or redirects him to the login page if he's not....

ratty-blush

7/10/2024

Handle 404 from a component query

I am using '@tanstack/react-query' and '@tanstack/react-router'. I have a component that is a child in my __root.tsx that queries the api. When it works, it works, but I am having trouble in the context of this file based router to figure out what to do when it 404s. This one data fetch in turn runs the entire ui and every query afterwards, so the ui won't work if that one request fails. Ideally I'd like to just display an error component, or reroute to one in the

if (isError) {...}

if (isError) {...}

section of that component, but I don't know what would be proper protocol here. I had...

absent-sapphire

7/10/2024

type inferred incorrect on getRouteApi or useSearch({ from: '/some/route/path' })

searchParams2 and searchParams3 both has a empty object type inferred unioned with the correct type. How to make sure the searchParams2/searchParams3 can get the correct typed object from search schema?...

stormy-gold

7/9/2024

Meta works on lazy routes despite TS screaming

Why does the Meta property work on the lazy route despite Typescript saying it doesn't exist? Are there any issues with using the Meta prop on the lazy route and ignoring the type error?...

deep-jade

7/9/2024

Two routes one page (optional parameter)

is there a way to have query like this whatever/ID/SECOND_ID where they both point to the same page but the SECOND_ID is optional? So even if you just put whatever/1 instead of whatever/1/2 it still match the same page

foreign-sapphire

7/8/2024

Using the basic code-based route example in electron forge app gives a blank page

wee-brown

7/8/2024

Validate Search different output and input types?

I used to have the following setup: ```ts const route = { path: '/zzz'...

foreign-sapphire

7/6/2024

Flash of unstyled content

Browsing through the docs on my phone, refreshing by pulling down from the top (iOS safari) shows FOUC. Since you guys are dogfooding Start on tanstack.com, could this be an issue? Solid has a similar issue caused with Vinxi from what I’ve read but the issue only existed in dev environments....

absent-sapphire

7/5/2024

Type validating arbitrary strings against router types

Hello, When I have a user sign in, I send them to third party url to login. I am storing the current path in local storage then when they are redirected back I am reading the path and redirecting in the beforeLoad API. What interface should I be using from tanstack/router to appropriately zod validate that a string satisfies my route types? Thank you!...

conscious-sapphire

7/4/2024

Role base URL protection

Hi I'm new on tanstack/router and i'm just wondering is there any way to close access of some URL depending on User role on File-Based-Routing for example: normal user role can not access the url of /dashboard...

stormy-gold

7/3/2024

Custom 404 does not appear in my main-layout

I am quite a bit confused on how to get a custom 404 page to display the header and footer that are in my main-layout.tsx. I am able to get a custom 404 to work by adding a notFoundComponent to the __root OR to the router const in main.tsx. However, those do not have my main-layout. Any ideas?

unwilling-turquoise

7/3/2024

Best practice for redirecting after a fetch

Hi everyone, I'm working on a routing setup and need some guidance on the best way to handle a redirect after fetching data. Here's my scenario: 1. I have two routes: /users and /users/$userId...

fair-rose

7/3/2024

Isn't the Tanstack Router in React not supporting Hot Module Replacement (HMR)?

I have an issue with the TanStack Router in my React application. The hot module replacement (HMR) functionality does not appear to be working as expected.

passive-yellow

7/2/2024

Link active prop with param

Hello I have a problem with activeProps prop in Link component and a route with a param. I have implemented a TabsRoute component. I have a sidebar with all the routes for example: ```ts export const SIDEBAR_ITEMS: SidebarItem[] = [ {...

national-gold

7/1/2024

Not able to build start app

``` [6:37:23 PM] ERROR [tsr-routes-manifest] Could not load tsr:routes-manifest (imported by nodemodules/.pnpm/@tanstack+start@1.43.4@opentelemetry+api@1.9.0_@types+node@20.14.9drizzle-orm@0.31.2@cloud_c3xbxkqqwnxdaj4km4r37i5kie/node_modules/@tanstack/start/dist/esm/router-manifest/index.js): Cannot read properties of undefined (reading 'map') at Object.load (/testapp/nodemodules/.pnpm/@tanstack+start@1.43.4@opentelemetry+api@1.9.0_@types+node@20.14.9drizzle-orm@0.31.2@cloud_c3xbxkqqwnxdaj4km4r37i5kie/node_modules/@tanstack/start/dist/esm/config/index.js:284:46) at async PluginDriver.hookFirstAndGetPlugin (/testapp/node_modules/.pnpm/rollup@4.18.0/node_modules/rollup/dist/es/shared/node-entry.js:19674:28)...

deep-jade

7/1/2024

Infer routes type to a custom component

I'm making a custom component that have a Link inside, I would like to pass the to route via props to the component, is there a type to get all the available routes in the same way the to prop of the Link does? ``` <Link to="/settings">Back</Link> ...

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