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

rare-sapphire

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...

national-gold

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?

other-emerald

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...

optimistic-gold

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...

sensitive-blue

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:...

quickest-silver

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....

conscious-sapphire

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'...

dependent-tan

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!

fascinating-indigo

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. ...

foreign-sapphire

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...

absent-sapphire

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...

conscious-sapphire

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")({...

optimistic-gold

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 ...

genetic-orange

12/4/2024

Auto-redirect

similar to this other question, i want to auto redirect to a child route on nav -- i.e. when navigating to settings i want to redirect to settings/organizations -- i tried the below along with several iterations and none can properly redirect (the nav routes work as expected) ```tsx import { Link,...

rare-sapphire

12/4/2024

Linking to same page and updating search params clears URL path

<Link to="." search={search} /> no longer works, my path is dropped to "/" yet search params are correctly updated. This used to work.

unwilling-turquoise

12/2/2024

is there any co-relation between useQuery and navigation container from react native?

getting the below error - Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? {getAppointmentsQuery.isLoading || loading ? ( <ActivityIndicator size={"large"} color={theme.colors.primary} /> ) : (...

harsh-harlequin

12/2/2024

How to handle server 500 error?

I want to show separate screen for 500 api response. I made listner for listening for 404 response and when detected i just do: ``` throw notFound({ routeId: '/_authorized/app' });...

conscious-sapphire

12/2/2024

Dynamic root path

Hi! I have an app that is dealing with internationalisation. My route structure is something like / /about /whatever...

mute-gold

12/2/2024

Code-First routes: No child routes found for Outlet

So I am developing TabComponent-based (BlueprintJS) app, where each Tab can have sub TabComponent. I tried different things but anyway if I log childMatches in root it is saying nothing found, so Outlet displays nothing. How should I build routes to make them appear in Outlet?...

ratty-blush

12/2/2024

How to reuse a child routes

#react-router I have a route like this: -

company.$id.members

company.$id.members

// will show members of $id company -

members

members

// will show all members ...

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