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

exotic-emerald

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.

other-emerald

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

other-emerald

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

xenial-black

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?

ratty-blush

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?

flat-fuchsia

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

fair-rose

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

xenial-black

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

deep-jade

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

fascinating-indigo

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

future-harlequin

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

fascinating-indigo

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

foreign-sapphire

5/7/2024

Router.status is always "pending" when you wrap the `RouterProvider` in `StrictMode`.

I noticed that if you wrap the RouterProvider in React.StrictMode, the status of the Router will always be "pending". This also happens with the "basic-file-based" example on GitHub (https://github.com/tanstack/router/tree/main/examples/react/basic-file-based). Is this correct behavior? Due to this issue, you can never get the correct resolvedLocation, because this will always return the first location you visited....

wise-white

5/7/2024

How to get type of Component which create by using createLink() function? Thanks

How to get type of props in Component which create by using createLink() function? Thanks

extended-salmon

5/7/2024

Declarative search param masking is lagging

I'm trying to use declarative route masking to clean up the url by not showing default search params. Navigating to my list page I want the user to see example.com/list and not example.com/list?page=1&search=&sortBy=date&sortOrder=asc&status=active&.... https://codesandbox.io/p/devbox/tsr-search-masking-question-vcds2n A simplified example is this route mask:...

ambitious-aqua

5/7/2024

What is the preferred/recommended way to implement protected routes?

I gave https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes a read and was still unsure what the preferred way would be, using Tanstack Router. The _authenticated.tsx is rather simple but fits really well. And I'm still unsure what the approach would be if I had a RBAC requirement for my routes. In a way that people without the expected claims/roles would not be able to view these routes....

foreign-sapphire

5/7/2024

loader vs beforeLoad

What is the difference between them? Which circumstances should I use one for another?

ambitious-aqua

5/7/2024

Equivalent of navigate(-1) using react router?

conscious-sapphire

5/6/2024

Title Not Setting on Document in Meta Route Prop

Does the router automatically set the document title using the Meta prop on a route? I set the title in the meta function, but it's not changing the title on the tab in the browser. This feature was mentioned here: https://github.com/TanStack/router/discussions/895#discussioncomment-9064913 But looking through the Tanstack website (the screenshot), I couldn't figure out how exactly it works. I'm using this in a SPA, but I'm not sure if that detail matters....

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