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

national-gold

5/25/2024

Isomorphic code in loader functions w/ SSR

What is the recommended way to write isomorphic code (code for both client/server, SSR-only, etc) for loaders? i.e. if I want to read the users cookies in the loader function, or headers used for a SSR request etc? For cookies right now I'm doing the following - would like to know how code like this is intended to be done 🙏 . ```ts beforeLoad: () => {...

like-gold

5/25/2024

Prevent same component from unmounting between routes

I have these three routes: * /search/ * /search/$query * /search/$query/$section ...

genetic-orange

5/25/2024

How to prevent usage of client only api's on the server? (tanstack router)

Hey 🙂 I have a hook, which is initializing a new RTCPeerConnection(). This errors on the server (obviously). How do I best handle this case? I could try to return early, if process.browser is not defined. But this will lead me to conditional hook calling....

optimistic-gold

5/25/2024

import { useLocation } from '@tanstack/react-router'

i get Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@tanstack_react-router.js?v=4d2868af' does not provide an export named 'useLocation while it's defined in the documentation...

adverse-sapphire

5/24/2024

How to refetch queries when the data are comming from the loader

I've a route where I load some fetch some data from react-query, however if I then do a mutaion and refetch that query it doesn't re-render the data in this component, I expect that the loader is only run on mount? How should I go about this? ```tsx export const Route = createFileRoute("/_authenticated/dashboard")({...

correct-apricot

5/24/2024

Navigation blocking but ignoring sibling route changes

I have a route that contains a number of child routes. I want to use the <Block /> component to block navigation when navigating away from the parent route (to display a save warning modal). The problem is that this also blocks navigation between the child routes, which is not what I want. How do I do this? I can't find an obvious solution. Basically, I want this behavior: /parent/childA to /parent/childB = don't block /parent/childA to /some-other-route = block...

deep-jade

5/24/2024

How do I stop search params from being automatically converted to number?

In validateSearch, a search param that's alphanumeric is coming in as a number if there are no letters in the value. Is this expected? My input validation with Valibot rejects it because of that. I really wouldn't expect the router to do anything with the value before validateSearch runs. For example, using URL the value is parsed as a string, not number....

optimistic-gold

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.

rich-copper

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

other-emerald

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

sensitive-blue

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

sensitive-blue

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(); ...

sensitive-blue

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

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

wise-white

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?

other-emerald

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

harsh-harlequin

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

rival-black

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

typical-coral

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

flat-fuchsia

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

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