SEO redirects

Links outlive routes. Customers keep old bookmarks, emails and shared links, and search engines keep old URLs indexed. When a route is deprecated or renamed, a link that lands on a 404 loses that customer and the page's ranking. The engine keeps a few routes only to send those visitors to the current page, so nothing breaks when the storefront's URLs change.

Read this page to see which URLs are redirected, and to add or change a redirect in your theme.

Redirect routesCopy Anchor Link

The brand redirect and /logout are route files the engine generates into your theme's app/routes/. The engine serves the others from its own .twilight/ folder, so your theme has no file for them. Their loaders live in @salla.sa/twilight-theme-engine/routes/seo-redirects.

{locale} is the language in the visited URL, or ar when the URL had none. The five account shortcuts and the three listing addresses keep a missing language missing instead. Each route also exists with a language prefix, like every storefront path.

The generated file for the brand redirect shows the pattern. The others are the same shape:

// @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 },
    }),
});

Product short linksCopy Anchor Link

A short link such as /ar/lvXvzln matches no route, so the router shows the not-found page. Before showing a 404, that page tries the code as a product:

1. The path must be one segment, or a language plus one segment, and the code must be 5 to 10 letters or digits and not a language code. Anything else is a normal 404.
2. While the lookup runs, the page renders nothing, so the 404 does not flash.
3. The code is sent to the products API as if it were a product id.
4. On a hit, the browser navigates (replacing the history entry) to /{locale}/{slug}/p{id}, with the slug taken from the product's url.
5. On a miss or a failed request, the 404 shows.

This happens in the browser only. A crawler that does not run JavaScript sees the 404.

Change or add a redirectCopy Anchor Link

The engine has no redirect table. A redirect is a route whose loader throws one.

• Change a target. Write your own loader with redirect from @tanstack/react-router in a file of the same name: take over the generated brand or logout file by deleting // @auto-generated, or, for a redirect the engine serves, add the file (for example app/routes/offers.tsx) to app/routes/ without that line.
• Add a redirect. Declare the old path in app/routes.ts and throw from its loader:

import { route } from '@tanstack/virtual-file-routes';

export const routes = [route('/old-sale', 'old-sale.tsx')];

import { createFileRoute, redirect } from '@tanstack/react-router';

export const Route = createFileRoute('/{-$locale}/old-sale')({
  loader: ({ params }) => {
    throw redirect({ to: `/${params.locale ?? 'ar'}/products`, search: { source: 'offers' }, replace: true });
  },
});

See Add a custom route for how route files and app/routes.ts fit together.

Edge casesCopy Anchor Link

• Slugs are not canonicalised. /wrong-slug/p123 still renders the product, and /wrong-slug/brand-77 still redirects. Canonical tags, not redirects, keep search engines on one URL.
• Query strings are dropped by the brand redirect. The account and listing redirects keep them.
• Language rules still apply. The locale layout redirects a bare path to /ar/... on multilingual stores, and removes the prefix on single-language stores.

See alsoCopy Anchor Link

• Not-found page
• Brand products and Product page
• Overview and Routes and pages