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

2/17/2024

Blocker and link

How can I trigger a blocker when I click on a link? The link just leads to another page in the application

ambitious-aqua

2/16/2024

File System Routing: Multiple levels of nesting in a single directory

Hi, I have an application that for most urls has three levels of path params. Something like this: myapp.com/project/$projectName/environment/$environmentName/build/$buildVersion/... the rest of the url here Most of the application's pages go under this structure....

extended-salmon

2/16/2024

When deploying on vercel, getting 404 when visiting a lazy loaded page after hard reload+cache clear

I am doing lazy loading with createLazyFileRoute and index.lazy.tsx strategy. When visiting a page that's lazy loaded (for eg. /dashboard) I get 404 not found and then I have to visit / (the only route that's not lazy loaded) and then visit other routes. This only happens when deploying on vercel, when building locally, it works fine....

ambitious-aqua

2/16/2024

Lazy Loading Rec'd Approach?

Hi, I noticed that the Kitchen Sink + Reacty Query (file based) example in routes/expensive/index.tsx looks like this: ```ts...

eastern-cyan

2/16/2024

Router context and beforeLoad race condition

App.tsx ``` import { RouterProvider, createRouter } from "@tanstack/react-router"; import { routeTree } from "@/routeTree.gen"; import { useAuthState } from "react-firebase-hooks/auth";...

metropolitan-bronze

2/16/2024

NotFound never reached

Our generated API client rejects its promise on a 404 err. Resulting in react-query to throw an error. I would like to use the NotFoundComponent. However, 404's are also redirected into the errorComponent. Is there an option to somehow decide whether it should be redirect to the error component or the NotFoundComponent? Handling it in the errorComponent itself is a bit annoying, since now I can rely less on parent notfound component...

metropolitan-bronze

2/15/2024

Page not reloading

The route switches to the new gameserver whenever that route is not cached. When cached it does not switch. I'm on wayland and my screen recording is a bit janky.. I looked at incorrect react-query cache, I see a cache for each gameserver, I see cached matched route for the route that matches the gameserverId...

adverse-sapphire

2/15/2024

<Link>, useNavigate makes that variable routes are not updated -> they need a reload

Hi, using a Link or useNavigate on product/1 for example, makes that sometime, it will render the product/2 because it was in cache, then if I reload the page, the good content is show. Can I do something about it ?

other-emerald

2/15/2024

Protect all routes with a redirect

Hey all, i'm trying to build a project where all routes are protected unless the user is logged in. I.e even if i hit "/" if i'm not logged in, i'll be redirected to the login page. I can't seem to figure out how to do this in a nice way. I've attached my csb link. Does anyone have any advice for me on the recommended way to do this? https://codesandbox.io/p/github/dave-hawkins/react-router-help/main?import=true&embed=1&file=%2F.codesandbox%2Ftasks.json Edit: This has been fixed, and the code now lives at https://github.com/dave-hawkins/tanstack-router-supabase-auth...

extended-salmon

2/14/2024

index.tsx vs index.route.tsx

I'm reading this part: https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#encapsulating-a-routes-files-into-a-directory Specifically:

For example, if you have a route file named posts.tsx, you would create a new directory named posts and move the posts.tsx file into that directory, renaming it to index.route.tsx.

...

harsh-harlequin

2/14/2024

Is this possible to update the context programmatically without using beforeLoad

Hi all I am using a code-based route I have to update the auth stage whenever the user completes the auth stage (opt verification stage, profile image adding stage, role adding stage). Is this possible to update the context without using beforeload

extended-salmon

2/14/2024

nested routeFilePrefix

When using routeFilePrefix, and nesting ~index.tsx inside a route folder, instead of just appending '/' at the end of route it appends '/~index'. (example folder structure screenshot is below) Instead of the ~index.tsx inside ~dashboard being at /dashboard/ route, it's at /dashboard/~index.tsx....

quickest-silver

2/14/2024

Nested path being caught by parent route

I have two files - $breed.tsx - $breed.$subbbreed.tsx The nested route is being intercepted by the first route in file based routing. Am I doing something wrong?...

typical-coral

2/14/2024

Type assignment flip in LoaderFnContext

I'm trying to build own types on top of the Tanstack router because my router collects it's routes at runtime and application is federated (spread across different packages); and while generally speaking it's a complicated task due to type safety, there's one problem I'm running into over and over again. In LoaderFnContext, if you try to do something like RouteCollector<TRoute extends MyAppAnyRoute = MyAppAnyRoute> it works well until reaches that type in shouldReload. At this moment, it tries to reverse-validate that my MyAppAnyRoute satisfies the exact route that I'm declared. It's like intentionally at some point tries to assign AnyMatch to the declared ExactMatch. Any ideas why it may happen?...

metropolitan-bronze

2/14/2024

Global search param

Starting from the auth layout there is a search param (gameServerId) that needs to be set for every route within that layout . However when navigating I currently need to set that search param again for every navigation... Is there a way to maintain that global search param? I thought I could achieve this through the validateSearch from the _auth, but that does not allow me to set custom search

deep-jade

2/14/2024

Am I doing something wrong with the loader function?

Hello everyone! 👋 I use my route's loader function to perform asynchronous processing that builds and returns a map (openlayers) and synchronous processing that returns what I call a graph (it's my own business object) that I use in my React component to pass as props to other components. I use the map in a useEffect to display it in the first rendering (setTarget). I'm asking myself a few questions. Normally, I'd want to perform a map.dispose() in the cleanUp function of the useEffect(), but due to the double execution of the effect because of react's strict mode, it doesn't render any map when I'm not in production, and I'd like to continue using strict mode....

eastern-cyan

2/13/2024

Can't modify router context from within a component

I don't know if this is intentional or not but I cannot modify context from within a component App.tsx ```const router = createRouter({ routeTree,...

ratty-blush

2/13/2024

Is there a way to not inherit the search parameters from the parent route?

I'm having some trouble in finding a strict type safe solution to my search parameters in child routes. (I am using code based routes) The case: I have a parent route with some search parameters: • param1: number...

harsh-harlequin

2/13/2024

How to get the search param using useSearch() at the first time?

Hi all I am using the useSearch() hook to get the search param it returns the value whenever the search param changes. I want to only get the values at the component mount not every change how to do that?

wise-white

2/13/2024

Non-Nested Routes with matches and breadcrumbs

Is it possible to have a history in non nested routes to create breadcrumbs? like in 1 screenshot: 1 root 2 /planning 3 /planning/periods...

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