# Brand products page (https://docs.salla.dev/twilight/react/routes/brand-products)



<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

Some links to a brand use the form `/$slug/brand-{$id}`. The customer never sees a page here: the route redirects straight to the [brand page](https://docs.salla.dev/twilight/react/routes/brand) at `/brands/$id`. Customise it only if you want the brand's products to appear at this URL, or to redirect somewhere else.

## URL [#url]

| Pattern                       | Example             | Goes to         |
| ----------------------------- | ------------------- | --------------- |
| `/$slug/brand-{$id}`          | `/nike/brand-77`    | `/ar/brands/77` |
| `/{locale}/$slug/brand-{$id}` | `/en/nike/brand-77` | `/en/brands/77` |

### Params [#params]

| Name     | Type                  | Example | Description                                                                                                    |
| -------- | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
| `slug`   | `string`              | `nike`  | Ignored. It only makes the path match the pattern.                                                             |
| `id`     | `string`              | `77`    | The brand id, written `brand-77`.                                                                              |
| `locale` | `string \| undefined` | `en`    | Optional. Without it the redirect uses the fallback locale `ar` ([locale prefix](https://docs.salla.dev/twilight/react/routes/home#locale-prefix)). |

There are no search params, and a query string on the short URL is not carried over.

## Route file [#route-file]

It has no component and no head, only a loader that redirects.

```tsx title="app/routes/$slug.brand-$id.tsx"
// @auto-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 },
    }),
});
```

To take it over, write your own file and map the path in `app/routes.ts` ([Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route)).

### A customised version [#a-customised-version]

This renders the brand's product list at the short URL, so the address does not change. It uses the same loader as the brand page. The engine head sets no canonical tag for brands, so two URLs with the same list can compete in search results; keep the redirect unless you add a canonical yourself.

```tsx title="app/routes/brand-products.tsx"
import { createFileRoute } from '@tanstack/react-router';
import {
  ProductListing,
  listingSearch,
  type ProductListLoaderData,
} from '@salla.sa/twilight-theme-engine/routes/product-listing';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/$slug/brand-{$id}')({
  ...listingSearch,
  loader: ({ deps, params }): Promise<ProductListLoaderData> =>
    ProductListing.loader({
      params: { source: 'brands', id: params.id },
      search: deps,
      locale: params.locale,
    }),
  head: withHead(ProductListing),
  component: BrandProductsComponent,
});

function BrandProductsComponent() {
  const data: ProductListLoaderData = Route.useLoaderData();
  return <ProductListing.Component {...data} />;
}
```

## What it loads [#what-it-loads]

Nothing. The loader redirects to `/{locale}/brands/{id}` before any data is requested. The brand and its products load on the [brand page](https://docs.salla.dev/twilight/react/routes/brand).

## Head and SEO [#head-and-seo]

None, because no page is rendered. A crawler that follows the redirect ends up on the brand page and its head.

## Edge cases [#edge-cases]

* **Redirect timing.** It happens while the route loads: on the server for a first request, in the browser for client navigation.
* **No locale in the URL.** The redirect uses `ar`, not the customer's language.
* **Unknown brand id.** The redirect happens first, so the 404 comes from the brand page.
* **Slug is never checked.** `/anything/brand-77` redirects like the real slug.

## See also [#see-also]

* [Brand page](https://docs.salla.dev/twilight/react/routes/brand) and [Brands index](https://docs.salla.dev/twilight/react/routes/brands)
* [SEO redirects](https://docs.salla.dev/twilight/react/routes/seo-redirects)
* [Routes overview](https://docs.salla.dev/twilight/react/routes)