fascinating-indigo

Locale Loader Runs on Auth Routes

I'm having an issue with TanStack Router where my locale route's loader is being triggered on auth routes like /auth/sign-in, causing unwanted API calls and 401 errors Current structure: - Route file: {$locale}/route.tsx - Auth routes: (authentication)/auth/sign-in.tsx Expected behavior: - /en or /tr should run the locale loader and fetch menus - /auth/sign-in should NOT run the locale loader What I've tried: 1. Changed from {-$locale} to {$locale} to make it non-optionals 3. Put auth routes in a separate (authentication) directory What am I missing? How do I properly configure TanStack Router to prevent the locale loader from running on auth routes? locale/route.tsx:

import { createFileRoute, Outlet } from "@tanstack/react-router";
import { IntlayerProvider, useLocale } from "react-intlayer";
import {
  getGetApiCmsMenusCmsMenuGetAllWithParentQueryOptions,
  useGetApiCmsMenusCmsMenuGetAllWithParent,
} from "@/api/generated/endpoints/cms-menus/cms-menus";
import { getApiCmsMenusCmsMenuGetAllWithParentIdParentIdParams } from "@/api/generated/endpoints/cms-menus/cms-menus.zod";
import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes";

export const Route = createFileRoute("/{$locale}")({
  loader: async ({ context, params }) => {
    console.log(`LOADER - Locale: ${params.locale}`);
    const queryOptions = getGetApiCmsMenusCmsMenuGetAllWithParentQueryOptions();
    await context.queryClient.ensureQueryData(queryOptions);
    return null;
  },
  component: LayoutComponent,
});

function LayoutComponent() {
  useI18nHTMLAttributes();

  const { defaultLocale } = useLocale();
  const { locale } = Route.useParams();

  const { data } = useGetApiCmsMenusCmsMenuGetAllWithParent();
  const parsed =
    getApiCmsMenusCmsMenuGetAllWithParentIdParentIdParams.safeParse(data);

  return (
    <IntlayerProvider locale={locale ?? defaultLocale}>
      <nav>
        <ul>
          {parsed.success
            ? parsed.data.map((item, idx) => (
                <li key={(item as any)?.id ?? idx}>
                  {item.displayName || item.name || "Menu"}
                </li>
              ))
            : null}
        </ul>
      </nav>
      <Outlet />
    </IntlayerProvider>
  );
}

import { createFileRoute, Outlet } from "@tanstack/react-router";
import { IntlayerProvider, useLocale } from "react-intlayer";
import {
  getGetApiCmsMenusCmsMenuGetAllWithParentQueryOptions,
  useGetApiCmsMenusCmsMenuGetAllWithParent,
} from "@/api/generated/endpoints/cms-menus/cms-menus";
import { getApiCmsMenusCmsMenuGetAllWithParentIdParentIdParams } from "@/api/generated/endpoints/cms-menus/cms-menus.zod";
import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes";

export const Route = createFileRoute("/{$locale}")({
  loader: async ({ context, params }) => {
    console.log(`LOADER - Locale: ${params.locale}`);
    const queryOptions = getGetApiCmsMenusCmsMenuGetAllWithParentQueryOptions();
    await context.queryClient.ensureQueryData(queryOptions);
    return null;
  },
  component: LayoutComponent,
});

function LayoutComponent() {
  useI18nHTMLAttributes();

  const { defaultLocale } = useLocale();
  const { locale } = Route.useParams();

  const { data } = useGetApiCmsMenusCmsMenuGetAllWithParent();
  const parsed =
    getApiCmsMenusCmsMenuGetAllWithParentIdParentIdParams.safeParse(data);

  return (
    <IntlayerProvider locale={locale ?? defaultLocale}>
      <nav>
        <ul>
          {parsed.success
            ? parsed.data.map((item, idx) => (
                <li key={(item as any)?.id ?? idx}>
                  {item.displayName || item.name || "Menu"}
                </li>
              ))
            : null}
        </ul>
      </nav>
      <Outlet />
    </IntlayerProvider>
  );
}

8 Replies

fascinating-indigoOP•4w ago

update

automatic-azure•4w ago

can you try moving the splat route one path deep? locale/{$locale}

fascinating-indigoOP•4w ago

But if I do that, won't it be affected as a prefix? That is, localhost:300/locale/en/* yes this worked, but now there is also /locale, and I don't want that. It should start with /en or /de, and if it's a route outside of these two locale information, it should continue, otherwise

automatic-azure•4w ago

when you got to /auth/sign-in i believe the splat catch all is also triggered? if so, in the loader or beforeLoad of the /{$locale} route, you can add an additional check to prevent/return rather than triggering the api call

fascinating-indigoOP•4w ago

what dou you mean catch all my friend how to checkexport const Route = createFileRoute("/{$locale}")({ loader: async ({ context, params }) => { console.log(LOADER - Locale: ${params.locale}); const queryOptions = getGetApiCmsMenusCmsMenuGetAllWithParentQueryOptions(); await context.queryClient.ensureQueryData(queryOptions); return null; }, component: LayoutComponent, }); actually here loader triggered in /auth/sign-in

automatic-azure•4w ago

you can check the _splat key in the params object. or if you have a limited number of locale, do a check to make sure the locale matches else return here: https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#splat--catch-all-routes

Routing Concepts | TanStack Router React Docs

TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. Each of these concepts is useful and powerful, and we'll dive into...

fascinating-indigoOP•3w ago

hmm update

automatic-azure•3w ago

still not working? Weird the exact path match isn't occurring, maybe change /{$locale} -> /$locale; i think you should try the router channel, as it seems related to routing. if that doesn't work when you visit /auth/sign-in what is logged here?: console.log(LOADER - Locale: ${params.locale}); you could use that to make a decision if to make the call or not

Gaming

Programming

Locale Loader Runs on Auth Routes

Did you find this page helpful?