Skip to content
Twilight React Playground
ثيم رائدaren

slugBrandRedirectLoader, pendingOrdersRedirectLoader

functionAdvancedserverbrowser

Loaders that render nothing and redirect: old /<slug>/brand-<id> links to the brand's product list, and /pending-orders to the orders list.

import { slugBrandRedirectLoader, pendingOrdersRedirectLoader, SlugBrandParams, PendingOrdersRedirectParams } from '@salla.sa/twilight-theme-engine/routes/seo-redirects';

In plain words

Older Salla storefronts used some addresses the React routes spell differently. So that those links keep working, the engine keeps a route for each whose loader immediately sends the visitor on to the new address. These routes have no page and no component: the redirect is all they do.

Signature

interface SlugBrandParams {
  slug: string;      // ignored
  id: string;
  locale?: string;
}
function slugBrandRedirectLoader(ctx: { params: SlugBrandParams }): Promise<never>;
// throws redirect(`/${locale || 'ar'}/brands/${id}`)

interface PendingOrdersRedirectParams {
  locale?: string;
}
function pendingOrdersRedirectLoader(ctx?: { params: PendingOrdersRedirectParams }): Promise<never>;
// throws redirect(`/${locale || 'ar'}/orders?status=pending`)

Example

app/routes/$slug.brand-$id.tsx (generated)
import { createFileRoute } from '@tanstack/react-router';
import { slugBrandRedirectLoader } from '@salla.sa/twilight-theme-engine/routes/seo-redirects';

export const Route = createFileRoute('/{-$locale}/$slug/brand-{$id}')({
  loader: ({ params }) =>
    slugBrandRedirectLoader({
      params: { slug: params.slug, id: params.id, locale: params.locale },
    }),
});

How it behaves

  • Mounted by the generated routes /{-$locale}/$slug/brand-{$id} and /{-$locale}/pending-orders. Both always throw, so their promise never resolves.

  • They throw the engine's redirect, which becomes TanStack Router's redirect({ to }) once @salla.sa/twilight-theme-engine/tanstack has been imported, as every theme's app/router.tsx does. See notFound, redirect, unauthorized.

  • Both put a locale first, ar when the route had none (FALLBACK_LOCALE).

  • slugBrandRedirectLoader and SlugBrandParams are also in the /routes barrel; pendingOrdersRedirectLoader is not.

Gotchas

  • pendingOrdersRedirectLoader redirects to /<locale>/orders?status=pending, but no /orders route is generated (the orders page is /account/orders), so the visitor lands on the not-found page. If your store still has /pending-orders links, override that path in app/routes.ts with a route of your own that redirects to /account/orders?status=pending.

  • docs/getting-started/06-add-or-override-a-page.md says /pending-orders redirects to /account/orders?status=pending. The code redirects to /orders?status=pending.

Related

Brands

The A to Z brands directory: every brand logo, grouped by first letter, each linking to that brand's product list.

Orders

The signed-in customer's order history, optionally filtered by status, as a table that loads more orders on request.

notFound, redirect, unauthorized

Throw helpers for route loaders: stop and show the not-found page, send the visitor to another address, or refuse a guest.

Forking a built-in page

Take over one built-in page: point its path at your own route file, reuse the module's loader and head, and swap or wrap its Component.

Source and docs