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

xenial-black

5/23/2024

redirecting back to root nested route when I switch tabs. Issue goes away when I reload tab

Hello, experiencing some strange behavior and was wondering if anyone else has experienced this, or maybe I'm doing something wrong here. I've removed all of my beforeLoad hooks and I'm still getting this issue.

deep-jade

5/23/2024

How can I disable the loader instantly returning the last route's data when I press "back"?

Example here: https://stackblitz.com/edit/tanstack-router-1finlk?file=src%2Froutes%2Ft%2Findex.tsx The example has the main page which has a loader that waits for one second, then generates a random string which is displayed by the route's component. 1. Look at the generated string...

xenial-black

5/22/2024

Routing using Mantine UI's Stepper component

Hey there! I am trying to use Mantine UI Stepper component with TSR+TSQ and was curious what the best approach to go about this would be. Should I render an outlet in each of the stepper step's and somehow calculate the active step number based on the current route? Where would I want to keep the state of each step along the way? Should I use a react context or can I utilize TSR+TSQ for state management? The full state of all the steps is stored server side but it is spread out over many endpoints per step. I have created a stackblitz sandbox showing what I have so far (with business logic redacted). https://stackblitz.com/edit/tanstack-router-gztxfg?file=src%2Froutes%2Fsteps.tsx The 3 main issues I am trying to solve right now are listed in the readme file:...

correct-apricot

5/22/2024

loader for nested route components

If I have a route which has several child components and each component requires some data loading, how can I add loader functions to child components? do I load data the traditional way with useQuery or should I load all data in the route and pass it to each child? or is there a better way? ``` /route-a: <ChildComponent/> // requires data loading...

correct-apricot

5/22/2024

cannot use useParams data in a useEffect hook!

When I use const {channelId} = Route.useParams() It seems that channelId does not update when I listen to it in a useEffect hook ```ts const { channelId } = Route.useParams(); ...

optimistic-gold

5/22/2024

Diagnosing bad context update behavior

Hey all, I'm facing a weird case of auth context not propagating from the <RouterProvider /> into a route def's beforeLoad(). This presents in layout components that should handle auth redirects not redirecting properly. I've followed this https://tanstack.com/router/v1/docs/framework/react/examples/authenticated-routes example, and in InnerApp I'm console logging the whole auth object just to see what my context thinks the auth situation should be. Then I pass that auth into RouterProvider like this: ```...

stormy-gold

5/22/2024

Combining file based routes with code based routing

We're migrating a big and old codebase from react-router@v3 and exploring TanStack Router. We intend to primarily setup our routes through the recommended file-based routing, but our application has a lot of redirects from older migrations that we need to keep working. We need to target some wildcard routes, and we've found a way to achieve this in the router.tsx, but it feels a little hacky. Is there a best practice to define code based routing besides file based routing that doesn't involve mutating the auto-generated routeTree?...

extended-salmon

5/22/2024

Custom blocker component

Hey, I saw on the docs that it is possible to use custom UI for useBlocker, but I’m not sure how this would be implemented. Does anyone have an example?

inland-turquoise

5/21/2024

Best practices for refetching data and rerendering after a mutation using Tanstack Router

Hi there, I have a question regarding the best practices for handling data fetching and rerendering in a specific scenario using Tanstack Router. In my application, I have a page that fetches data from an API using the loader function during the initial rendering. The fetched data is then displayed on the page. Additionally, there's a button on the page that, when clicked, triggers a mutation on the server-side. After the mutation is performed, I want to refetch the updated data and rerender the component to reflect the changes. However, I'm unsure about the best approach to handle this flow using Tanstack Router. ...

users-subscription.i...

stormy-gold

5/21/2024

Add children object syntax notFoundError

Hi! Using file based routing. The autogenerated routeTree is using object syntax for rootRoute.addChildren. This gives me a notFound error: Warning: A notFoundError was encountered on the route with ID "__root__" Getting the same error for all routes. ...

quickest-silver

5/21/2024

How to redirect to a default child route?

What's the best way to automatically redirect from a parent route to a default child route? Let's say we have an editorRoute: ``` export const editorRoute = createRoute({...

vicious-gold

5/21/2024

Code based routing help

Hi all, struggling to understand the routing concepts a little bit. partly bc it is 4am. My aim is to have /games be the "create game" page, and /games/$slug be the "playing game" page. there are other routes like /games/$slug/results also. Is it correct to have THIS rootRoute here? Or should the game's route parent be different? (and also the results page etc)...

like-gold

5/20/2024

How to work with tanstack router in a subdomain based app?

I've trie'd a many structures in my project but nothing works, multiple roots, multiple tsr.configs, multiple _layouts. I dont want to use the subdomain as path because i think that is a bad practice to use someting like: subdomain1.domain/subdomain1/login & subdomain2.domain/subdomain2/login ...

dependent-tan

5/20/2024

lazyRouteComponent or createLazyRoute

Which one is recommended?

foreign-sapphire

5/20/2024

Invalid use of Link component or bug?

```ts <Link className="font-bold hover:underline hover:cursor-pointer" to="/users/$id" params={matchingUser}...

correct-apricot

5/20/2024

meta tags

I see there is a meta property when defining the Route, but it doesn't do anything. Is this still experimental and is there a way to use it in SPA (I've seen tanstack.com gh repo uses it, but that has SSR)

xenial-black

5/19/2024

Path Params in Middle Of Route?

Can a path param be used like so: /route1/$var/add parseParams returns type error: Property '$var' does not exist on type 'Record<never, string>'.ts(2339) or should I be using a different route structure? My use case is four tabs used to filter a table by the $var value and provide CRUD functions for each. They use the same database table but different form fields with some overlapping fields....

national-gold

5/19/2024

createFileRoute question

Hi, I'm using file based routing and wonder why a path is required to the createFileRoute method? It doesn't seem to matter what I specify as path. For example, if I set it to '/' (which is a valid path) on all my createFileRoute, the app works just fine. I can't specify anything though, it has to be some of my valid paths to not get type(script) error though....

national-gold

5/19/2024

useRouteContext initially undefined

Hi, I have a custom ssr project. I'm using the useRouterContext in my react component and observing the following. ...

correct-apricot

5/18/2024

Freeze Outlet for page animations

How can I freeze what the Outlet is rendering? This is useful for animating between pages with libraries like react-spring

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