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

5/14/2024

Params Route doesn't load the data when the params change

Hi all, I'm using a route with a ID params like this one

``
export const Route = createFileRoute('post/$postId')({
  loader: ({ context: { queryClient }, params: { postId } }) =>
    // Use the

loader` option to ensure that the data is loaded...

quickest-silver

5/14/2024

Blank page if route is not loaded yet

Hi. I got an issue in my app. When I click on a link to navigate on a route that is not loaded, it leaves me with a blank page, and when the route is finally loaded, the page is not showing : It stay blank. If I let the route load. I.E: by placing my cursor over a link that has preload: intent. The page shows immediatly after clicking on it, without showing any blank page....

fair-rose

5/13/2024

Issue - All Routes Not Found

I followed this tutorial https://tanstack.com/router/latest/docs/framework/react/quick-start, but all routes return not-found

stormy-gold

5/13/2024

How do you clear search params from URL upon navigating from one page to another?

I have a page which can have search params in the URL for filtering the items on that page (things such as page and pageSize). From this page I can click on one of the items to navigate me to a totally different page under a different route path (the page im navigating to isnt a child route of the page im navigating from). The issue is that any search params in the URL before navigating persist to the page I am navigating to. I have tried using the useNavigate hook to navigate to the new page upon a button click and setting the search params to empty strings...

other-emerald

5/11/2024

Protected routes with query

I have my API which has an auth system which uses sessions via cookies. The problem is that to check if the user is logged in, I make a request to /auth/me. I would like on my router to make a request to this endpoint (API) to check if the user is connected or not. I want to know if it is possible to do this? If not, what is the best way to check if the user is logged in? FYI, I use Tanstack Query to do my queries....

adverse-sapphire

5/10/2024

How to show loader while auth is verifying?

Version: react-router v1.31.20 I have a route /auth/verify which is navigated to when a user clicks on a magic link. The logic in the beforeLoad handles the magic link being clicked and verifies the user/creates a session and then redirects to the dashboard. While this is happening it shows a white page. I would like to show a loading spinner or similar, but nothing I have tried works. Namely pendingComponent, a loader or component. ...

vicious-gold

5/10/2024

Using <Navigate to={} /> with Layout routes?

I recently switched to file based routing and i'm having some issues using the Navigate component with _layout routes my tree looks like this (copied from gen, names changed) ```tsx...

fair-rose

5/10/2024

Does navigation cause wasteful re-renders?

Hi, looking to migrate from react-router. One of the biggest issues with react-router is that it has alot of wasteful re-renders. This is due to navigation state and the Contexts used. There are many issues on their github but this one seems to sum it up https://github.com/remix-run/react-router/issues/7634 . There does not seem to be any priority to address this by the maintainers there despite many people experiencing this.

adverse-sapphire

5/10/2024

Throw notFound() gets me a blank page

For example, whenever this code triggers a notFound, i get a blank page. ```js export const Route = createFileRoute("/_authenticated/admin/")({ beforeLoad: async () => { const user = await getUser();...

adverse-sapphire

5/10/2024

Is it possible to trigger beforeLoad of a folder index route and respective sub routes?

I have the folder structure in the image, i've changed folder name from _layout to _authenticated. In the index of admin, i have this before load: ``` export const Route = createFileRoute("/_authenticated/admin/")({ beforeLoad: async () => {...

dependent-tan

5/10/2024

Search param changes invalidates loaders for all layouts

I'm seeing changes to search params on a page reloading data for all parent layouts, even ones that do not read search params. Is that how it's supposed to work? I would expect only the actual page's data to reload. I do have a beforeLoad for auth in the top layout, could that be causing this?

deep-jade

5/10/2024

routeTree gen in JS

Hi all - for some reason i want to use router on JS project. But how to make the routeTree.gen generate a JS file instead of TS?

like-gold

5/10/2024

Save history for search params

I need to save the search parameters of a web page and use them when the user comes back to that page. For example, if the user is on "/routeA/?page=3" and then goes to "/routeB/?page=1", when they return to "/routeA", it should show the results for "page=3". How can I do this? I am uisng tanstack router

eastern-cyan

5/9/2024

React.useId causes hydration errors

I'm on the latest commit of Tanstack Router and seem to be running into hydration errors with React.useId() - is anyone else facing the same problem? I'm noticing it with React Aria Components

Warning: Prop `id` did not match. Server: "react-aria-:Rb3aH1:" Client: "react-aria-:R2oqH1:"

Warning: Prop `id` did not match. Server: "react-aria-:Rb3aH1:" Client: "react-aria-:R2oqH1:"

...

correct-apricot

5/9/2024

Intended behaviour for navigation

Hi All, just curious if this is intended behaviour cause I couldn't really find it in the docs but if i have a route that is <host>/auth/logout and I create a link to it I get typescript autocompletion that first defaults to ```ts <Link to="auth/logout"> Logout </Link>...

foreign-sapphire

5/9/2024

Redirect from validateSearch to the same route with fixed query params using replace

Hi! We're currently using react-router, but we're investigating switching to this library. We're using query params quite heavily in our app and we'd like to be able to validate and fix them inside the router and not components, to avoid the initial render of a component with the invalid state. If the query params are not valid, is there a way to redirect from the router to the same route, but with updated query params, by replacing the invalid entry in the browser's history stack?...

xenial-black

5/8/2024

breaking change?

i just upgraded from 1.28.7 to 1.31.23 and now i get the following error... A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. I have no use of Suspense in my app at all......

multiple-amethyst

5/8/2024

fetch next page

https://tanstack.com/query/latest/docs/framework/react/guides/query-functions#query-function-variables is there a way to pass the data that has been retrieved when fetchNextPage is being executed? i wanted to use the document data (retrieved from the initial fetch) as my cursor instead of incementing or decrementing one by one....

eastern-cyan

5/8/2024

Auth / beforeLoad / router.invalidate / redirect problem with router context update

i have the problem probably due to my understanding of data flow in router context? i have simple ...

adverse-sapphire

5/7/2024

Attempting to navigate to `./` causes type error in new version

Hi everyone. Running into the following issue where trying to navigate to ./ shows a type error asking for params: ``` const navigate = useNavigate(); ...

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