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

flat-fuchsia

10/3/2023

Passing QueryClient but still getting `No QueryClient set, use QueryClientProvider to set one

```export default function MainLayout({ children }: { children: React.ReactNode }) { const { state, send } = useAuth(); useEffect(() => { console.log(state.context);...

continuing-cyan

10/2/2023

Is it possible to show a loading spinner/page/component while loader is fetching the data?

Question in the topic title

other-emerald

9/30/2023

how to navigate upon action success?

I use @tanstack/react-actions to submit a form. How can I navigate away when the action was completed successfully?

quickest-silver

9/29/2023

Q: Regarding the sharing behaviour of query params between routes

My question is regarding the sharing of search query param values across path routes. This is the route setup I've got. rootRoute...

fascinating-indigo

9/26/2023

Recommended Pattern for File based and React-Query Context

I am trying to to figure out how to get the scope of the context right when using file based routes. Has anyone done this?

fascinating-indigo

9/25/2023

Adding Strongly Typed Link Options to Component

I am building a breadcrumb component that I want to pass a strongly typed version of the link in, I have the params for this component defined as: ```js export interface BreadcrumbParams {
homeLink: LinkPropsOptions;...

fascinating-indigo

9/25/2023

Layouts with an index

I am trying to set up the following routes: ``` /$account_id/home.tsx /$account_id/home.index.tsx...

robust-apricot

9/24/2023

Typesafe context for FileRoute

Hi, Is there any way to make the route context typesafe with the new FileRoutes? I followed the TanStack Query tutorial (https://tanstack.com/query/latest/docs/react/examples/react/react-router), adding the beforeLoad, loader and pendingComponent properties to the route config, but when I try to request the context inside component like this:

const { queryOptions } = useRouterContext({ from: "/plan" });

const { queryOptions } = useRouterContext({ from: "/plan" });

...

national-gold

9/22/2023

Lazy component load with suspend data loader?

I want to combine to functions: - lazy component loading with: lazyRouteComponent - Suspense tag with Await tag. I try it with this code, but nothing happens: ```...

national-gold

9/22/2023

Hey, we build a management app with 100 - 200 routes. I don't want to define this all in one file.

Hey, we currently build a big management frontend. We will probably have 100-200 routes. How can I best split this into different files (Don't one BIG file)? For the Link-tag (<Link to={customerRoute.id}) we need "global" route exports, but how i can this manage with different files?...

plain-purple

9/20/2023

🚨 Loader is calling an endpoint too many times

Stackblitz: https://stackblitz.com/edit/stackblitz-starters-fd75no?file=src%2Froutes%2Fapp%2Fsettings%2Fusers%2Froute.tsx In the example you'll find minimal setup for a user list, with ability to filter by username. ...

harsh-harlequin

9/19/2023

Types for component in lazy loaded components

To lazy-load a component it needs to be defined in a separate file ( or does it?), therefore you cannot automatically infer the type of the component props, like useContext(). I currently have not found a way to receive the type of those without self-reference errors or extracting the types manually. I found this issue already but that is not a solution. https://github.com/TanStack/router/discussions/656...

xenial-black

9/19/2023

ESLint: missing in props validation

I get eslint: useRouteContext is missing in props validation [react/prop-types] error when doing the types like this:

export const Posts: typeof postsRoute['options']['component'] = (props) => {...}

export const Posts: typeof postsRoute['options']['component'] = (props) => {...}

The LSP knows about the props, so I have auto-completion. Does anyone have an idea why ESLint is complaining ?...

fascinating-indigo

9/16/2023

Deferred Data

I am using the Await componet from tanstack/react-router I have it setup right and types are correct but I am getting this error from the await component awaited.tsx:12 Uncaught TypeError: Cannot read properties of undefined (reading 'uid')...

fascinating-indigo

9/15/2023

Resource Routes

Just thinking out loud, the solution may be simpler than I can currently think about, but can we set up resource routes as components that can be referenced in another route I am trying to build a kitchen sink example with Tanstack...stack...and I want to mimic the Remix combobox behavior In this situation there is a route that returns a component that has a loader and action. The action searches through customers. ...

national-gold

9/15/2023

Router uses features only brought in versions 18.0.0+

We are using react and react-dom with version 17.0.2 a we wanted to switch te router from reacr-router to tanstack router. In the docs there states that the supported react version starts at 16.8 but it doesn't work. Always get problems with startTransitions that it doesn't exists. ...

helpful-purple

9/14/2023

How to access data of parent loader?

My index route loader fetches some data. But I cannot use it inside child route. indexRoute.useLoader() throws the following error error: ``` const routeTree = rootRoute.addChildren([...

extended-salmon

9/13/2023

i18n resources?

Hi 👋 I just wanted to know if there were any resources available on how to do internationalization with the router?...

itchy-amethyst

9/12/2023

Broken import on 0.0.1-beta.174 ?

Hello guys, this morning I updated the router version and I keep receiving this error. I'm using the router in a NX monorepo React app and I use Vite as a bundler. Before updating (from beta 108) everything worked flawlessly. See screenshots for more info. Thanks in advance for your help...

quickest-silver

9/12/2023

Is it possible to remove the trailing slash?

My route tree is setup like whats in the picture below. When going to the "search page" the generated route is /agreements/ and when using search params, it comes out to something similar to /agreements/?page=1&size=10. Similarly, when navigating to the item page, the generated url looks like /agreements/12345/. Is it possible to remove that trailing slash to get routes to look like /agreements , /agreements?page=1&size=10, and /agreements/12345?...

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