TanStack

T

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

wise-white
wise-white
View on Discord
12/12/2024

How to unit test (jest) route lazyRouteComponent?

Hi, i'm using lazyRouteComponent on Code Based Routing, but when i try to unit test (jest) which keep getting an error. any idea how to solve it? ... const homeRoute = createRoute({ getParentRoute: () => privateLayoutRoute,...
No description
like-gold
like-gold
View on Discord
12/12/2024

Implementing a Table of Contents (hash change scroll issue)

I am trying to implement a Table of Contents sidebar for an API documentation site (in one-page style) that contains hash links (e.g., to="#Auth"). When clicking on one of the Table of Contents links, having the browser scroll down to the anchor that matches the hash is working as expected. The part I'm running into some trouble with is when I try to update the hash as a result of the user scrolling down the content part of the site. When I try to update the hash in the URL, the browser scrolls to the anchor element, but I'd really like to avoid that behavior so the user can scroll at their own pace. I've tried using navigate, updating the location state using router.buildAndCommitLocation, and even just trying window.location.hash = '#Auth'. All of these result in the hash being updated in the address bar, but they also all take over scrolling. I believe the latter is happening because the history implementation is overwriting window.history to support the router's subscriptions. I found this PR, which seems relevant to the issue I'm experiencing: https://github.com/TanStack/router/pull/1105#issuecomment-2019026150 (the code causing the scrolling seems to have moved here: https://github.com/TanStack/router/blob/35af575ab4c623556ecdb613ac1c85864f0c95d9/packages/react-router/src/Transitioner.tsx#L146) If I'm understanding correctly, the recommendation was to try using the Scroll Restoration API. I wasn't able to get that to work either, unfortunately....
xenial-black
xenial-black
View on Discord
12/11/2024

Is there a way to force throw away the previously rendered instance of the same page?

When navigating between two instances of the same page, i.e. just switching out a param, all the state of the page is maintained, which leads to bugs in our case. Is there a way to force the router to throw away the state of the old page? Like when you add a key to component
diverse-rose
diverse-rose
View on Discord
12/11/2024

Router Memory History route not persisting upon page reload

I was using Browser History when setting up tanstack-router to my react-vite-electron project. Unfortunately, during build this was not working due to some Electron issues, which made me switch to Memory History. https://github.com/TanStack/router/discussions/835 I am new to Memory History and it seems like when I reload/force-reload the page in Electron, the route switches to the index route which did not happen when using Browser History. Is there a way to prevent this?...
harsh-harlequin
harsh-harlequin
View on Discord
12/10/2024

Declarative Link Handling with Async Parameters

What’s the best practice for using the Link component when a parameter (e.g., sessionId) needs to be fetched via an async call? I know I can use router.navigate() imperatively, but is there a declarative way to handle this scenario? ```tsx <Link from={Route.fullPath}...
exotic-emerald
exotic-emerald
View on Discord
12/10/2024

Scaffolding a new project fails

Running the CLI fresh fails to scaffold a router project. ❯ npm create @tanstack/router@latest Need to install the following packages: @tanstack/create-router@1.87.4...
rising-crimson
rising-crimson
View on Discord
12/9/2024

Disable link when not allowed to visit

Is there a way to share some state between the route itself and the link? I have a permission check in the route and i want to disable the link when the user cant visit it but i want to prevent from writing this logic twice since it would be really easy to miss something? I thought of this ```ts export const hasPermission = () => { const user = queryClient.getQueryData(authQueries.getMe().queryKey)...
exotic-emerald
exotic-emerald
View on Discord
12/9/2024

ELECTRON DYNAMIC ROUTES

Having massive dramas getting dynamic routes in electron to work for me. Any help would be great, It's successfully getting Id and triggering click. I've tried various patterns from docs to no success. The paths I have are src\pages\vehicles$vehicleId.tsx...
ratty-blush
ratty-blush
View on Discord
12/8/2024

router.invalidate

Could somebody explain what router.invalidate actually does? I'm seeing this function a lot in the examples, and don't know why?
rare-sapphire
rare-sapphire
View on Discord
12/7/2024

Library nuqs

Can the nuqs (https://nuqs.47ng.com/) library be used in the tanstack route? has anyone used it before? or is there another solution to make it easier to manage search params for universal use in a hook datatable tanstack table? the hook is like this but to be implemented in react vite and tanstack route is different to manage the search params...
compatible-crimson
compatible-crimson
View on Discord
12/7/2024

Obtain the pathname of a route outside of React?

Hi there, if i need to construct an array of objects(like an AST) to display a sidebar tree, what is the correct way of accessing the route string for typesafe to be passed in the sidebar definition? I've tried by importing the Route from each createRoute defined but somehow the "to" property comes undefined, in the console looks like Js Proxy Here is a screenshot of the tree object...
No description
sunny-green
sunny-green
View on Discord
12/7/2024

Putting auth context in RouterProvider context gives errors

I'm wanting to put the authClient of better-auth into the context of RouterProvider. I get the error found in the first image. From the better-auth dev:...
No description
generous-apricot
generous-apricot
View on Discord
12/7/2024

Check if user is in Index Route

Is it possible to check if the user is in the index route? I am trying to use shadcn tabs as links, and need to set values. This is easy enough for the child routes as I can use useLocation to get the pathname, then run pathname.split('/').pop() to get the last value of the route. However this doesn't work for the index route as pathname doesn't have a trailing slash....
multiple-amethyst
multiple-amethyst
View on Discord
12/7/2024

ERR_REQUIRE_ESM when running pnpm build for Vite + React project

I just migrated from code-based to file-based routing.
at Module.<anonymous> (/Users/me/Desktop/project/Frontend/node_modules/.pnpm/@tanstack+router-generator@1.86.0/node_modules/@tanstack/router-generator/dist/cjs/filesystem/virtual/getRouteNodes.cjs:3:1) { code: 'ERR_REQUIRE_ESM'...
harsh-harlequin
harsh-harlequin
View on Discord
12/5/2024

Apply _pathless.tsx layout to index.tsx?

Hi there đź‘‹ I am wanting my index route to situate without a nested layout. I use a _main.tsx layout to wrap a number of pages and these pages are split into two sub layouts which process auth status, _protected.tsx and _unprotected.tsx. I want the index of my route tree (/) to situate within the _protected.tsx layout. How can I accomplish this? Prefixing index.tsx with _protected.index.tsx does not seem to work. Any help is appreciated!
No description
exotic-emerald
exotic-emerald
View on Discord
12/5/2024

Storybook with Tanstack Router

I'm on a project using turborepo with vite react app using tanstack router and a ui package using storybook. I was tasked with creating navigation for the app. I wanted create a component with a story in the ui package and the following occured: I was wondering the best way to use Link in storybook. I was wondering if the best approach is to put tanstack router in the root directory and share the router with the app and package. After a team discussion I was outnumbered 4 to 1 telling me the router should not be used in stories ever and the package should not be in the root. ...
fascinating-indigo
fascinating-indigo
View on Discord
12/4/2024

I could be doing something wrong, but are the start examples broken for anyone else?

I could very well be doing something wrong, but are the start examples broken for anyone else? The router examples seem to work fine. https://tanstack.com/router/latest/docs/framework/react/examples/start-basic...
No description
fascinating-indigo
fascinating-indigo
View on Discord
12/4/2024

Migrating from React Router is Code-based Routing or Virtual Routing best choice?

We have a large multi-page app that we are converting page by page into a SPA. We started with React router, but have run into some problems and want to try TanStack. We can't use file based routing and all the identifying information for each page is in its search parameters (ie: ?id=xyz&tab=content). We would like to lazy load components as they are routed to since these are pretty heavy pages with lots of components and requests waterfalls that we only want to load when actually needed. What...
rising-crimson
rising-crimson
View on Discord
12/4/2024

Property way to handle not found components with permissions

Hello, we are building an dashboard where i already handle authentication, but a user also has permissions to view certain pages or not. This i how i thought i would handle this ```ts export const Route = createFileRoute("/_app/claims/$claimId")({...
flat-fuchsia
flat-fuchsia
View on Discord
12/4/2024

throws in loader causes errors in console even if there is an error component

I started this conversation in the query section, but it looks like it's more of a router question so I'm moving it here https://discord.com/channels/719702312431386674/1313646077219704935 I throw an exception in the loader (query does on error), but I can't stop the loader from writing the error message into the console. Even if the errorComponent on the root route is picking up the error and reacting to it ...
PreviousNext