T
TanStack16mo ago
optimistic-gold

redirect in beforeLoad/loader causes infinite loop

I have a layout _authed,
export const Route = createFileRoute("/_authed")({
component: LayoutComponent,
beforeLoad: async ({ context: { queryClient } }) => {
const avatars = await queryClient.fetchQuery(avatarListQueryOptions);

if (!avatars.length) {
throw redirect({ to: "/avaturn" });
}
},
});
export const Route = createFileRoute("/_authed")({
component: LayoutComponent,
beforeLoad: async ({ context: { queryClient } }) => {
const avatars = await queryClient.fetchQuery(avatarListQueryOptions);

if (!avatars.length) {
throw redirect({ to: "/avaturn" });
}
},
});
No idea why it causes an infinite loop. For now, I moved the logic to a child route, instead of the layout.
2 Replies
equal-aqua
equal-aqua16mo ago
GitHub
Infinite navigation on redirects · Issue #1728 · TanStack/router
Describe the bug If i throw the redirect error inside beforeLoad for component or inside parent layouts for the same location.href - i got an infinite redirects. Your Example Website or App It does...
extended-salmon
extended-salmon16mo ago
Try moving the query out of the beforeLoad and instead pass the avatars as a context https://tanstack.com/router/v1/docs/framework/react/examples/authenticated-routes
React TanStack Router Authenticated Routes Example | TanStack Route...
An example showing how to implement Authenticated Routes in React using TanStack Router.
No description

Did you find this page helpful?