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

helpful-purple

1/31/2024

How to redirect from root layout?

I want to make sure that my root layout is also authenticated, and if not then navigate to the /login page and authenticate the user. I was using the authentication context based example on github but when i add a before load to the root ``` export const Route = createRootRouteWithContext<MyRouterContext>()({ beforeLoad: ({ context, location }) => {...

absent-sapphire

1/31/2024

[SOLVED] Does validateSearch not work with createLazyFileRoute?

I'm learning how to do redirects, and I'd like to place a redirect search param on one of my routes. I'm coming across an error stating

Object literal may only specify known properties, and 'validateSearch' does not exist in type 'LazyRouteOptions'.ts(2353)

Object literal may only specify known properties, and 'validateSearch' does not exist in type 'LazyRouteOptions'.ts(2353)

...

conscious-sapphire

1/31/2024

Recovery from error in errorComponent

Hi guys, I just decided to switch to Tanstack Router and I think I love it, but due to incompleted docs I have some issues with recovering from error in errorComponent. ```function ChooseLocationError({ error }: ErrorComponentProps) { if ('cause' in error) { return (...

eastern-cyan

1/31/2024

Not valid react child error on simple component

I'm getting this error when navigating to the router /dashboard This is simple component - my other routes are working fine - it works when i return <h1> Dashboard</h1> directly in Route instead of function... ``` export const Route = createFileRoute("/dashboard")({ component: () => DashboardComponent,...

conscious-sapphire

1/30/2024

Getting multiple re-renders

When I load the app, and when my routes change, my Root Route seems to re-render. Im generating the logs using the useLogRenders hook from this example from an issue I saw on github which could be a similar problem? In the logs screenshot, I've got no react components being rendered in my Root route....

typical-coral

1/30/2024

Getting 'Type instantiation is excessively deep and possibly infinite.' TS error using matchRoute

I am using matchRoute to see if the user is on /account

const matchRoute = useMatchRoute();

const isAccount = matchRoute({ to: '/account' });

const matchRoute = useMatchRoute();

const isAccount = matchRoute({ to: '/account' });

...

foreign-sapphire

1/30/2024

using vinxi with tanstack router, updated example

i'm looking at 2 examples: - https://github.com/nksaraf/vinxi/blob/038b5fffaf395d7f9c61f41929cb79fde46ada14/examples/react/ssr/tanstack-router-app/app.config.js#L10-L73 uses older tanstack router version but latest vinxi version this one uses vinxi 0.1 (older version) but latest tanstack https://github.com/TanStack/router/blob/main/examples/react/vinxi-basic-ssr-streaming/app.config.js ...

plain-purple

1/30/2024

Search params getting lost when navigating

I'm trying to figure out a weird issue where search params are not getting set correctly when navigating. I haven't been able to reproduce it in a standalone app, so I haven't created a router bug yet. I first saw this on version 1.0.7 and I also tried 1.15.2 but got the same behavior. We have a shared component that contains a Link component with search params that is used on different routes. On some of the source routes, the link correctly navigates to the destination route, but on one particular source route, the destination route gets the search params from the source route rather than the search params from the Link. If I copy the URL from the link and paste it into a new tab, it correctly loads the search params, so I know that the search in the Link is correct....

conscious-sapphire

1/29/2024

Param masking clears path

I've got a route that requires a path param e.g. path: 'dashboard/$userId. I also want to use masking to hide some information from the URL. When I navigate, If I do: ...

rare-sapphire

1/29/2024

Why context auth doesn't work if the router is lazy?

I want to put router lazy, but if a put the context it's not gonna work ``` import { createLazyFileRoute, redirect } from '@tanstack/react-router' import Home from "@pages/home"...

stormy-gold

1/29/2024

Migration from `NotFoundRoute` to `notFoundComponent`

I'm trying to follow the migration guide for NotFoundRoute in order to move on notFoundComponent. I have a "global" Not Found Error, which needs to be renderer with the RootRoute Layout. When I try to use notFoundComponent on rootRoute, the component is not displayed inside the Layout when it was well displayed with NotFoundRoute. This is very strange because the migration guide says : "When using NotFoundRoute, you can't use layouts. notFoundComponent can be used with layouts."...

typical-coral

1/29/2024

File-based authenticad route is rendered because isAuthenticated is not fetched yet in the context

Sorry for the noobie question, but in this example: ```export const Route = createFileRoute('/dashboard')({ beforeLoad: ({ context, location }) => { if (!context.auth.isAuthenticated) {...

absent-sapphire

1/29/2024

Squiglies in createLazyFileRoute

i get squiglies in the string here. I copied it from the docs. export const Route = createLazyFileRoute('/about')({ component: About, });...

afraid-scarlet

1/29/2024

Getting a weird error following the react-query-file-based example

I'm trying to migrate our app to tanstack router but after I added react query to the context I ended up with the error in the image. I don't know what to do 😦...

flat-fuchsia

1/28/2024

Should I use Loader in routes?

If I'm using react-query should I integrate it to the router? Should I also migrate the whole react query custom hooks inside my components and move the logic into the loader using the queryClient?

foreign-sapphire

1/28/2024

opengraph usage with router

i'd like to assign OG:image and some tags to some of my routes (static and dynamic) how can I do that?

crude-lavender

1/28/2024

ts error when using MatchRoute to identify parametrized child route in the parent route component

Example code: https://stackblitz.com/edit/tanstack-router-bu4ifd?file=src%2Fmain.tsx I have a /posts route with a list of posts (PostsComponent). ...

extended-salmon

1/28/2024

LayoutIndexImport.update is not a function

I am having problems creating a file-based routing setup using the Vite plugin for TanStack Router. I am getting an error I am not sure how to solve:

routeTree.gen.ts:35 Uncaught TypeError: LayoutIndexImport.update is not a function
    at routeTree.gen.ts:35:44

routeTree.gen.ts:35 Uncaught TypeError: LayoutIndexImport.update is not a function
    at routeTree.gen.ts:35:44

...

other-emerald

1/28/2024

Disable error component, or enable enable it to retry query.

Hey, I got stuck with the problem that I want to have try again button to try to refetch query if it fails. I don't know how to do it using tanstack router because it is providing context inside error component, and i haven't found a way to disable errorComponent. here is my route code: ...

extended-salmon

1/28/2024

What is the current way to not trigger whole tree reload (as parent) on sub-tree URL change?

Question in topic. They way so that it only triggers the reload of the changed part/changed route/new route, instead of the whole tree?...

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