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

extended-salmon

3/6/2024

how does deduping works in tanstack router

Hi. I wonder how does deduping works in tanstack router and is there any samples I can see?

eager-peach

3/6/2024

Cannot read properties of undefined (reading 'options')

Hello! I'm using Tanstack router with Vite, and I'm encountering the error Cannot read properties of undefined (reading 'options') after each code change during hmr update. ```tsx export const Route = createFileRoute('/_auth/cash-orders/$cashOrderId')({ parseParams: ({ cashOrderId }) => ({...

extended-salmon

3/4/2024

Vinxi streaming example

Hi there, I am currently trying to fix the Vinxi SSR streaming example. I've updated it to the latest version and fixed the breaking changes, but I cannot get it to work properly. Firstly the Vite HMR is broken because the client cannot find the Vite preamble, this is apparently due to the vite react plugin not supporting streaming correctly (it does not add the preamble automatically when streaming). The preamble needs to be added once [streaming is ready and needs to be and async module](https...

flat-fuchsia

3/2/2024

Amplify authenticator component

Hi there, I am using AWS Amplify's react authenticator component with cognito and would appreciate some guidance 🙂 I am wondering the best approach to handle authenticated routes. If I was having the whole app behind authentication, I would wrap the routerprovider in App.tsx with the Authenticator component. However I only need to force a user to authenticate when they attempt to make an action of a logged in user....

wee-brown

3/2/2024

Suspense queries and isFetching

According to the React docs, when you wrap part of your application in a Suspense component and specify a fallback, then the fallback component will be rendered until all children have completed their data fetching. In other words, if queries in child components are in a fetching state, then the fallback is rendered instead of the children. When child components have finished fetching, then they are rendered. That being so, I'm confused about the useSuspenseQuery example mentioned in the Tanstack docs and in particular the isFetching status. The component in the Project.jsx file is defined like so: ``` export default function Project({ activeProject, setActiveProject }) {...

quickest-silver

3/1/2024

different layouts between root path and /<some-path> while sharing root

Picture shares my ideal route tree, but children wont match to root path, so I can only accomplish this imperatively in render fn and chose which layout to render based on router state. Hoping to accomplish this with code based routing

genetic-orange

3/1/2024

Data Loading with Prefetch and UI skeleton

Currently, upon clicking a link the route is updated in the URL and a loading indicator is displayed until loader is resolved. I just want to show something to user as soon as they click. I think this provides much smoother UX. I would still like to use loader (with prefetch enabled) but show some static text /UI skeleton placeholders in the route page while data is resolved in the background and available in react query. ...

wise-white

3/1/2024

Breadcrumbs examples

Hi! I was looking for a breadcrumbs implementation example, I can’t seem to understand how the example in the router context docs nor any of the other questions. Does anyone have an example or more info to complement what’s in the router context docs?...

generous-apricot

2/29/2024

Nested route context doesn't update.

Hi. I've forked Authenticated routes with context example from tanstack router docs. I've switched using useAuth to Route.useRouteContext() which is modified in dashboard.tsx in beforeLoad so it returns typesafe user - ```ts return { ...context, auth: {...

adverse-sapphire

2/29/2024

How to match activeProps for all nested route

I have a path abc/*, I want to activeProps active with all nested path after abc/

harsh-harlequin

2/29/2024

How should I be expected to parse params ?

Hello there, I'm currently migrating one of our frontends to tsr from react-router. I would like to be able to parse the route's path params through a zod parser. ```ts z.object({ systemId: systemId.optional(),...

adverse-sapphire

2/29/2024

How to get all route as string[]?

I want to get the list of available route to use in Tab Navigation Reactjs. Thank you

extended-salmon

2/29/2024

loader and service worker

Hi. Does loader function use service worker that's why it works in parallel while user is navigating to a page?

ratty-blush

2/29/2024

loaderData

so I managed to get my route loader to work ```export const Route = createFileRoute('/subscription')({ loader: async ({ context }) => { ({...

eager-peach

2/29/2024

How to correctly set up nested routes so that Breadcrumbs work?

I have the following structure: _auth.contracts.tsx _auth.contracts.lazy.tsx _auth.contracts_.$contractId.tsx _auth.contracts_.$contractId.lazy.tsx...

correct-apricot

2/29/2024

Performance issue with Vite plugin on windows

Hey Tanstack Router Community, I am facing a weird perf issue with the vite plugin. I have a small app with aroud 6 routes implemented using file based routing and the plugin generates the routes for me in around 300 - 500ms(I am on mac). But for my other team members using windows it is takes upwards of 10seconds. Any idea why that might be happening? Also wanted to understand what is the recommended practice for the routeTree.gen.ts file, should it be committed to remote or not since it will anyway be generated during the build process....

passive-yellow

2/29/2024

Incorrect Context Type

Hey folks, I'm trying to recreate the React Authenticated Route example from: https://github.com/tanstack/router/tree/main/examples/react/authenticated-routes-context However, I keep getting a type error: Property 'auth' does not exist on context {} any ideas how to fix this?...

fascinating-indigo

2/28/2024

Add data from loader to context?

Im looking at the examples using the route context to construct a breadcrumb trail, and this is great except what if the data you need to construct the breadcrumb comes from data in the loader, and not just from stuff you can figure out in beforeLoad? Is there a way to get the two to communicate?

extended-salmon

2/28/2024

useEffect vs router loader

Hi. I am just curious. What is the difference between async calls in useEffect and the router loader?

continuing-cyan

2/27/2024

Optional parameter route

Hi there! I'm curious about implementing an optional parameter route. Specifically, I'm wondering if it's feasible to manage variations like workspace and workspace/${id} using a single component without registering two separate routes.

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